如何對齊列表下拉菜單

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

您可以通過設置position：相對於「.dropdown」和position：absolute來設置「.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。