html - 不明白为什么相同的下拉菜单有不同的宽度

Question

这是我在截图中遇到的麻烦：

第一个下拉菜单：

第二个下拉菜单：

第二个下拉列表右侧的宽度稍大一些。谷歌浏览器说，宽度是一样的。

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; 
}

Answer 1

我想你应该设置一个固定的宽度

Answer 2

向您的类添加一个max-width: 245px;属性，.dropdown-menu它应该修复渲染。

Answer 3

将此添加到您的 CSS 中：

.row .nav-pills .dropdown-menu a {
    width:245px;
    height: 25px;
}

并将 class="dropdown-toggle" 的宽度添加到.row .nav-pills .dropdown-menu您的 CSS

编辑的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;
} 

也许这应该这样做。

Answer 4

我检查并发现以下任何样式更改都会有所帮助，而不是使用 :min-width"。

.row .nav-药丸 .dropdown-menu

{

   width: 245px;

}

或者

.row .nav-药丸 .dropdown-menu

{

  width: 27.22%

}

为了安全添加最大宽度样式。