下拉列表获胜't与下拉按钮垂直对齐

Dropdown list won't align vertically with dropdown button

本文关键字：按钮 垂直 对齐 获胜 下拉列表      更新时间：2023-09-26

我有一个下拉按钮，当单击它时，它会为用户下拉一个选项列表，我将它放在一列中，但我希望它位于列的中心。我使用text-align: center;来实现这一点，但当我真正单击按钮时，列表会下降到按钮的左侧，而不是正下方。我曾尝试过设置列表的样式，但似乎没有任何变化。我不确定text-align: center;是否是使这个元素居中的正确方法。我使用Javascript来切换列表，所以我也尝试了对类进行样式设置当函数执行时，添加了作为类open的<div class=dropdown 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;
}

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

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

此处的示例：http://www.bootply.com/L6evJPHbRe

这修复了列表宽度的问题。

   .open>.dropdown-menu{
        text-align: center;
        left: 50%;
        transform: translate3d(-50%,0,0);
    }

http://codepen.io/Saar/pen/EVVZPE

text-align: center;只是确保选项本身的文本也与中心对齐。

如果你知道选择列表的宽度，你可以覆盖Bootstrap CSS，它将元素绝对定位在左边，添加一些额外的CSS:

.open>.dropdown-menu {
    width: 160px;
    left: 50%;
    margin-left: -80px;
}

请在此处查看演示https://jsfiddle.net/Lrogdbr4/2/

您可以尝试使用它来覆盖twitter引导程序.下拉菜单类。

.dropdown-menu {
    position: relative;
    left: auto !important;
    float: none !important;
    margin: auto;
}

或

#option-selection {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 25px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 160px;
    margin: 0 auto;
}
.dropdown-menu {
    position: absolute;
    left: auto;
    float: none;
}
相关文章：