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

您的float: left元素已a，因此您的li元素仍在各自的位置。

您看到楼梯效果的原因是因为a元素高于它们所包含的li元素，因此它们会推送下一个链接a 1}}元素前进。如果您使用浏览器的开发人员工具，则可以看到li的渲染高度小于其子级的渲染高度，因此每个a元素占用li中的一些空格1}}在它之后。

您需要以下CSS：

ul li {
    float: left;
}

要了解高度如何不匹配，请参阅此处的演示。边框定义li元素的边界框，背景应用于a元素：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

每当您创建水平导航菜单时，都应该为列表项添加内联块样式。在你的css中试试这个：

ul li{
  display:inline-block;
}

Answer 3

问题是您没有在li标记上定义float或inline-block属性，因此它显示为全宽度块。您的示例中的浮点数仅位于标记里面 li中，因此如果您只是将浮动移动到li，那么您应该很好。更好的是，使用其他评论中建议的内联块。

CSS水平菜单使用无序列表弯曲变形

3 个答案: