我有一个下拉按钮,当点击它时会为用户下拉一个选项列表,我把它放在一列中,但我希望它位于列的中心。我用了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  <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;
}
最佳答案
将 .dropdown
的显示设置为内联 block ,以便将其边界框设置为其内容的大小。
#option-selection .dropdown {
display:inline-block;
}
关于javascript - 下拉列表不会与下拉按钮垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32506996/