以下是截图中的麻烦:
第一次下拉:
第二次下拉:
第二次下拉的右侧宽度略大一些。谷歌Chrome说,宽度是 同样的。
HTML代码:
<div class="row menu">
<ul class="nav nav-pills pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
My reports
<span class="caret my-reports-caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Performance", performance_reports_path %></li>
<li class="divider"></li>
<li><%= link_to "Account settings", '#' %></li>
</ul>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
My account
<span class="caret my-account-caret"></span>
</a>
<ul class="dropdown-menu">
<li><%= link_to "My website", websites_path %></li>
<li class="divider"></li>
<li><%= link_to "Account settings", edit_user_registration_path(current_user) %></li>
</ul>
</li>
</ul>
</div>
我的CSS:
.menu{
width:940px;
height: 30px;
border-width:1px;
border-top-style:solid;
border-bottom-style:solid;
border-color: grey;
padding:10px;
background-color: rgb(212,229,190);
}
.row .nav-pills
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 245px;
padding: 0;
margin: 0;
list-style: none;
rgb(180, 210, 135)
background-color: #ffffff;
border-width:0 1px 1px 1px;
border-color:rgb(180, 210, 135);
-webkit-box-shadow: 0 5px 10px rgba(180, 210, 135, 0.2);
-moz-box-shadow: 0 5px 10px rgba(180, 210, 135, 0.2);
box-shadow: 0 5px 10px rgba(180, 210, 135, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
添加了链接的CSS
.menu .nav-pills
.dropdown-menu a {
display: block;
padding-top: 5px;
padding-left: 10px;
clear: both;
font-weight: normal;
line-height: 18px;
color: black;
white-space: nowrap;
}
.menu .nav-pills .dropdown-toggle {
border: 1px solid #B4D287;
background-color: white;
margin-bottom: 0px;
}
答案 0 :(得分:0)
我想你应该设置一个固定的宽度
答案 1 :(得分:0)
将max-width: 245px;
属性添加到您的班级.dropdown-menu
,它应该修复渲染。
答案 2 :(得分:0)
将此添加到您的CSS:
.row .nav-pills .dropdown-menu a {
width:245px;
height: 25px;
}
并将class =“dropdown-toggle”的宽度添加到CSS中的.row .nav-pills .dropdown-menu
已编辑的CSS:
.row .nav-pills .dropdown-menu {
border-width:0 1px 1px 1px;
width: 243px;
}
.menu .nav-pills .dropdown-menu a {
padding-top: 5px;
height: 20px;
padding-left: 10px;
width: 235px;
}
.menu .nav-pills .dropdown-toggle {
border: 1px solid #B4D287;
width:243px;
}
也许这应该这样做。
答案 3 :(得分:0)
我检查过并发现以下任何样式更改都会有所帮助,而不是使用:min-width“。
.row .nav-pills .dropdown-menu
{
width: 245px;
}
OR
.row .nav-pills .dropdown-menu
{
width: 27.22%
}
安全性添加最大宽度样式。