Question

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

由于某种原因，菜单的第一项高度高于菜单中的其他项目 - 如下所示：

enter image description here

如何让第一项的高度与列表中的其他每个列表项相同？

我试过了：

明确设置第一个列表项的高度。什么都没有改变。
从菜单中删除填充。什么都没有改变。
从菜单中删除边距。什么都没有改变。

Here's a jsfiddle showing my problem in action。我知道小提琴中的代码现在有点乱，但是我会在解决这个问题之后继续研究它。

来自小提琴的代码：

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:right）。除了此图片之外，您的菜单内的div“浮动”，但样式.dropdown-menu>li>a显示block - 布局以及clear:both用于菜单中的链接，这些位置整个菜单“在图片下方”。

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

1 个答案: