防止菜单“向下错位” | CSS-Tricks

如果您熟悉“浮动”的概念，您就会知道，如果将页面元素浮动到左侧，则下一个页面元素将尽可能地向上移动到该元素的右侧。但是您是否曾经见过浮动元素“向下错位”？

这是在创建水平菜单时可能会遇到的一个相当常见的问题。像大多数菜单一样，您创建了一个无序列表

<ul id="menu">
	<li><a href="#">My</a></li>
	<li><a href="#">Little</a></li>
	<li><a href="#">Menu</a></li>
</ul>

您希望菜单项成为大的可点击块，因此您编写了如下CSS

ul#menu li a {
	display: block;
	width: 130px;
	text-align: center;
	font-weight: bold;
	float: left;
	color: white;
	font-size: 1.2em;
	text-decoration: none;
	background: #600;
}

这些块浮动到左侧，因此它们应该全部排成一行，对吧？不，这会导致一些向下错位。问题在于包裹锚元素的列表元素。这些也是块级元素，但它们没有浮动。这会造成混乱，因为块级元素自然会在其后有一个断行（就像一个不可见的<br />）。这会将下一个元素向下推一个当前行高的距离，这就是导致向下错位的原因。

以下是解决方法

ul#menu li {
	display: inline; /* Prevents "stepdown" */
}

将这些列表元素设置为内联将消除这些断行，并确保您的菜单保持美观、整洁和笔直！

Dan Ott

# 2008年2月6日

另一种选择是浮动 li 元素而不是链接。这也能让你更好地控制每个 li 的定位/间距。

另外，只是一件小事，但上面你给出的 css 示例引用了不同的元素。

Alex

# 2008年2月7日

此外，如果将 li 元素的 line-height 设置为 0，问题就会消失。

Alma

# 2008年2月7日

我习惯于将浮动应用于 li 元素，这样如果我想在菜单栏上添加一些文本（而不是链接，比如某种问候语或标语），我只需将其放入一个 li 中即可。

Yoshcat

# 2008年2月11日

我也给 LI 元素设置了 float 属性。
我不喜欢内联元素包含块级元素的概念。

Jan

# 2008年2月18日

我是不是错了，还是菜单向下错位的问题只有 IE6 才会出现？
说实话，我在任何其他浏览器中都没有遇到过这种行为。
样式化和浮动 li 大多数情况下都能正常工作，尽管在我的最后一个项目中，我不得不放弃一些列表并用几个 p 替换它们。只是一个为了兼容性的临时修复……

5h4rk

# 2008年8月6日

它只发生在我的 IE6 上……对此有什么解释吗？我应该“* html 它”还是应该将其作为普通声明应用？

Kelley

# 2008年12月5日

我刚刚在 IE7 中遇到了这个问题。将 LI 而不是 A 浮动解决了这个问题。

Dishant

# 2013年10月7日

这个解决方案非常棒！！我尝试过使用以下方法创建相同的

div>s 如下。

标记

    <div class="wrap">
            <div class="inner-wrap"><a href="#"></a></div>
            <div class="inner-wrap"><a href="#"></a></div>
            <div class="inner-wrap"><a href="#"></a></div>
    </div>

样式
.wrap .inner-wrap a {
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;
}

在这种情况下它不会中断吗？

div> 和都是块级元素。我仍然不明白为什么它在这种情况下可以正常工作。

Dishant

评论永久链接# 2013年10月7日

更正格式

上面给出的代码片段可以正常工作，不会中断。我想知道如果 div 和 li 都是块级元素，我上面给出的示例是如何工作的？

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。