如何制作水平/自定义Bootstrap下拉列表？

Question

HTML page contents age selector as a Bootstrap drop-down . I want to put li tags in horizontally as follows. how use css to achieve it? following css is no working

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

=>

HTML

<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

Solution

You need to add float:left to the li

Working 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

You need to adjust the li and not the ul . I would float the li to the left . Then limit the width of #horizontalmenu .

#horizontalmenu {
  max-width: 225px; /* appx. width of 4 li */
}
#horizontalmenu > li {
  float: left;
}

Demo JSFiddle .

You could also use display: inline-block; on the li but there will be small gaps of space between each li relative to the font size. Although there are workarounds for the spaces created by inline elements, it's usually easier to float that inline-block if those spaces become an issue.