Bootstrap açılır listesini nasıl yatay/özelleştirilmiş hale getirebilirim?

Question

HTML sayfa içeriği yaş seçici olarak bir Bootstrapdrop-down. Aşağıdaki gibi yatay olarak li etiketlerini koymak istiyorum. Bunu başarmak için css nasıl kullanılır? css aşağıdaki

<div class="container"> 
    <div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Age<span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" id="horizontalmenu"> 
     <li><a href="#">21</a></li> 
     <li><a href="#">22</a></li> 
     <li><a href="#">23</a></li> 
     <li><a href="#">24</a></li> 
     <li><a href="#">25</a></li> 
     <li><a href="#">26</a></li> 
     <li><a href="#">27</a></li> 
     <li><a href="#">28</a></li> 
    </ul> 
    </div> 
</div> 

Answer 1

Çözüm

Sen li

için float:left eklemeniz gerekir hiçbir çalışma

#horizontalmenu {display:inline} /*not working*/ 

=>

HTML'dir

Çalışma Demo

li{ 
 
    float:left; 
 
} 
 
ul{ 
 
    width:250px !important; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Age<span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu" id="horizontalmenu"> 
 
     <li><a href="#">21</a></li> 
 
     <li><a href="#">22</a></li> 
 
     <li><a href="#">23</a></li> 
 
     <li><a href="#">24</a></li> 
 
     <li><a href="#">25</a></li> 
 
     <li><a href="#">26</a></li> 
 
     <li><a href="#">27</a></li> 
 
     <li><a href="#">28</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Sen li değil ul ayarlamanız gerekir. li'u left'a kaydırırdım. Ardından #horizontalmenu genişliğini sınırlayın.() (http://support.microsoft.com/kb/9244329/).

li numaralı telefondan display: inline-block;'u da kullanabilirsiniz, ancak yazı tipi boyutuna göre her bir li arasında küçük boşluk boşlukları olacaktır. Satır içi öğelerin oluşturduğu boşluklar için geçici çözümler olsa da, bu boşluklar bir sorun haline gelirse, satır içi bloğu yüzdürmek genellikle daha kolaydır.