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

Geeth Welagedara 发表于 Dev

盖斯·韦拉格达拉（Geeth Welagedara）

HTML页面内容的年龄选择器Bootstrap drop-down。我想按以下方式将li标签水平放置。如何使用css来实现呢？以下css是行不通的

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

里诺·拉吉（Rino Raj）

解决方案

您需要添加float:left到li

工作演示

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>