如何对齐列表下拉列表

Question

我在菜单中有一个下拉菜单。但它不是我需要的方式。
但我需要它作为一个菜单项对齐。就像在这里：

可以用css简单地完成吗？ HTML

<li class="dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Account<b class="caret" style="float: right;"></b></a>
    <ul class="dropdown-menu">
        <li><a href="{% url 'account' %}">Account Info</a></li>
        <li><a href="{% url 'dev_billing' %}">Billing Settings</a></li>
        <li><a href="{% url 'dev_logout' %}" >Sign out</a></li>
    </ul>
</li>  

css：

.dropdown-menu {
    background-color: black;
    min-width: 100px;
    width: 160px;
}
.dropdown-menu > li {
    align: center;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #cfeffd;
    background-color: #333333;
    background-image: none;
    filter: none;
}

.dropdown-toggle {
    min-width: 100px;
    width: 125px;
}

.caret {
    marging-left: 30px;
}

Answer 1

您可以通过设置位置：相对于“.dropdown”和位置：绝对值为“.dropdown-menu”，将其宽度设置为100％。

li {
  padding: 10px 20px;
}

.dropdown {
    position: relative;
    display: block;
    background-color: #ff0;
    width: 120px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: gray;
}

这是一个有效的例子：

http://jsfiddle.net/5CB4Q/3/

Answer 2

为DropDownList指定一个CssClass，如 DDLStyle 。

select.DDLStyle{text-align:middle;}

这适用于大多数现代浏览器，但不适用于IE。