0

スクリーンショットでの問題は次のとおりです。

最初のドロップダウン:

ここに画像の説明を入力

2 番目のドロップダウン:

ここに画像の説明を入力

2 番目のドロップダウンは、右側の幅が少し大きくなっています。Google 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; 
}
4

4 に答える 4

0

これをCSSに追加します。

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

そして、class="dropdown-toggle"の幅を.row .nav-pills .dropdown-menuCSSのに追加します

編集された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;
}

多分これはそれをするべきです。

于 2012-07-05T09:06:25.463 に答える
0

確認したところ、：min-width "を使用する代わりに、次のスタイル変更のいずれかが役立つことがわかりました。

.row .nav-pills .dropdown-menu

{{

   width: 245px;

}

また

.row .nav-pills .dropdown-menu

{{

  width: 27.22%

}

安全のために、最大幅スタイルを追加します。

于 2012-07-05T09:11:04.167 に答える