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

Question

HTML页面内容年龄选择器为Bootstrap drop-down。我想将li标签水平放置如下。如何使用css来实现它？以下css无效

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

=＆gt;

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

<强>解决方案

您需要将float:left添加到li

工作演示

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要调整li而不是ul。我会将li浮动到left。然后限制#horizontalmenu的宽度。

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

演示JSFiddle。

您也可以在display: inline-block;上使用li，但每个li相对于字体大小的间距会有很小的差距。虽然内联元素创建的空间有变通方法，但如果这些空格成为问题，通常更容易浮动内联块。