Question

我有以下代码：

<div class="dropdown dropdown-scroll" style="text-align:center">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        Serial No.<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <div class="input-group input-group-sm search-control">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-search"></span>
                </span>
                <input type="text" class="form-control" placeholder="Query" ng-model="query" />
            </div>
        </li>
        <li role="presentation" ng-repeat='serial_no in serial_nos | filter:query'>
            <a href="{{'{{serial_no.id}}'}}">{{'{{serial_no.id}}'}}</a>
        </li>
    </ul>
</div>

style="text-align:center"正在对齐（水平）div元素，但是当选择下拉列表时，我的列表项会在页面的左侧对齐。

如何直接将它们放在下拉按钮下？
如何让页面上的所有内容垂直放置（可能是顶部的25％）？

Answer 1

在position:relative div上设置dropdown-scroll：

.dropdown-scroll {
    position: relative;
}

并将下拉列表的位置设置为absolute：

.dropdown-menu {
    position: absolute;
    top: 0; //adjust according to need
    left: 0; //adjust according to need
}

div中的水平中心ul

1 个答案: