0

我花了将近一个小时试图让我的导航菜单看起来不错。我正在使用 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-layoutblock以及clear:both菜单中的链接，它将整个菜单放置在图片的“下方”。

于 2013-09-18T14:25:01.490 回答