html - 导航菜单的第一项有奇怪的高度

Question

我花了将近一个小时试图让我的导航菜单看起来不错。我正在使用 Twitter Bootstraps 的平面 CSS 菜单。

出于某种原因，菜单的第一个元素的高度比菜单中的所有其他元素都高 - 如下所示:

如何让第一个元素的高度与列表中所有其他列表元素的高度相同？

我试过:

1. 明确设置第一个列表项的高度。没有任何变化。
2. 从菜单中删除填充。没有任何变化。
3. 从菜单中删除边距。没有任何变化。

Here's a jsfiddle showing my problem in action .我知道 fiddle 中的代码现在有点乱，但我会在解决此问题后进行处理。

fiddle 中的代码:

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

Answer 1

第一项的额外高度来自您的图片 (profile_circle)。此图像已设置 float 样式 (float:right)。 div 和你的菜单在这张图片旁边“ float ”，但是样式 .dropdown-menu>li>a 说 block-layout in为菜单中的链接添加 clear:both，将整个菜单置于图像“下方”。