0

ナビゲーション メニューの見栄えを良くするために、ほぼ 1 時間費やしました。Twitter Bootstraps のフラット css メニューを使用しています。

何らかの理由で、メニューの最初の項目の高さが、メニューの他のすべての項目よりも高くなっています。

ここに画像の説明を入力

リスト内の他のすべてのリスト項目と同じ最初の項目の高さを取得するにはどうすればよいですか?

私はもう試した：

  1. 最初のリスト項目の高さを明示的に設定します。何も変わりません。
  2. メニューからパディングを削除します。何も変わりません。
  3. メニューから余白を削除します。何も変わりません。

これは、私の問題を実際に示している jsfiddleです。現在、フィドルのコードが少し乱雑であることはわかっていますが、この問題を修正した後、後でこれに取り組みます。

フィドルからのコード:

HTML:

<img id="profile_circle" style="height:25px;width:25px;;border-radius: 16px;float:right;margin-top:10px;border:2px solid #DDD8CE;cursor:pointer;" src="https://secure.gravatar.com/avatar/3ab5cad18247b67090e61f59b47ef7c4?size=20" alt="">

<div style="width:160px;min-height:100px;background-color:white;z-index:3;position:relative;top:40px;left:240px;-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2),inset 0 0 0 #000;-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;" class="grey_box">
                                    <ul class="dropdown-menu">
                                        <li><a href="https://domain.com//profile/jjmpsp">My profile</a></li>
                                        <li><a href="https://domain.com//universities/">My university</a></li>
                                        <li><a href="https://domain.com//dumps/">My dumps</a></li>
                                        <li><a href="https://domain.com//notes/">My notes</a></li>
                                        <li class="divider"></li>
                                        <li><a href="https://domain.com//logout/">Logout</a></li>
                                    </ul>
                                </div>

CSS:

.dropdown-toggle:focus{outline:0;}
.dropdown-menu{z-index:1000;display:block;padding:5px 0;list-style:none;font-size:14px;background-color:#ffffff;background-clip:padding-box;margin:0px !important;}
.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5;}
.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.428571429;color:#333333;white-space:nowrap;}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#ffffff;background-color:#428bca;}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#428bca;}

.grey_box {
background-color: #FFF;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 3px solid #DDD8CE;
}
4

1 に答える 1

1

最初のアイテムの余分な高さは、画像 (profile_circle) から取得されます。この画像はフローティング スタイル ( float:right) を設定しています。はdiv、この画像のほかに「フロート」内にメニューがありますが、スタイルに.dropdown-menu>li>aはblock-layout と表示さclear:bothれ、メニュー内のリンクに加えて、メニュー全体が画像の「下」に配置されます。

于 2013-09-18T14:25:01.490 に答える