javascript - 下拉列表不会与下拉按钮垂直对齐

Question

我有一个下拉按钮，当点击它时会为用户下拉一个选项列表，我把它放在一列中，但我希望它位于列的中心。我用了text-align: center;要实现这一点，但是当我实际单击按钮时，列表会下拉到按钮的左侧，而不是直接在按钮下方。我试图设计列表的样式，但似乎没有任何改变。我不确定 text-align: center;是将此元素居中的正确方法。我正在使用 Javascript 来切换列表，所以我也尝试了类的样式 <div class=dropdown open> as class open 在函数执行时添加。代码如下:

<div id="option-selection">
                <h3>Select an Option</h3>
                <div class="dropdown">
                  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Available Options&nbsp&nbsp<span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                    <li><a href="#">Option</a></li>
                  </ul>
               </div><!--dropdown-->
</div><!--option selection-->

下拉按钮的 CSS:

#option-selection {
text-align: center;
padding-top: 5px;
padding-bottom: 25px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}

Answer 1

将 .dropdown 的显示设置为内联 block ，以便将其边界框设置为其内容的大小。

#option-selection .dropdown {
  display:inline-block;
}

此处为实例:http://www.bootply.com/L6evJPHbRe