[英]how to align list dropdown
I have a dropdown in menu. 我在菜单中有一个下拉菜单。 But it drops not the way I need.
但这不是我需要的方式。
but I need it to be aligned as a menu item. 但我需要将其作为菜单项对齐。 like in here:
就像在这里:
could it be done simply with css? 可以简单地用css完成吗?
html 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: 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;
}
You can make it by setting position:relative to ".dropdown" and position: absolute to ".dropdown-menu" and his width to 100%. 您可以通过将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;
}
Here is a working example : 这是一个工作示例:
Assign the DropDownList a CssClass like DDLStyle . 为DropDownList分配一个类似DDLStyle的CssClass。
select.DDLStyle{text-align:middle;}
This works in most modern browsers, but not in IE. 这适用于大多数现代浏览器,但不适用于IE。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.