html - CSS水平菜单使用无序列表 flex 变形

Question

HTML:

<div id="nav">
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

CSS:

ul {
    padding-left: 0;
    background-color: #036;
}

ul li a {
    text-decoration: none;
    float: left;
    padding: 0.2em 1em;
    color: white;
    border-right: 1px solid white;
}

结果:

https://jsfiddle.net/u3gau3qf/

为什么这个菜单看起来像楼梯？

Answer 1

你的 a 元素上有 float: left，所以你的 li 元素仍然在它们自己的行上。

您看到阶梯效应的原因是 a 元素比包含它们的 li 元素高，因此它们插入下一个链接的 a 元素向前。如果您使用浏览器的开发者工具，您会看到 li 的渲染高度小于其子元素的高度，因此每个 a 元素都在li 紧随其后。

您需要以下 CSS:

ul li {
    float: left;
}

要实际查看高度如何不匹配，这里有一个演示。边框定义了 li 元素的边界框，背景应用于 a 元素:

ul {
	padding-left: 0;
	background-color: #036;
}

ul li {
	border: 1px solid #000;
}

ul li a {
	text-decoration: none;
	float: left;
	padding: 0.2em 1em;
	color: white;
	border-right: 1px solid white;
	background: rgba(255,255,255,0.3);
}

<div id="nav">
    <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>