Question

两个例子的HTML：

<div id="nav">
    <ul>
        <li><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>

仅限display: inline的CSS：

ul {
    background-color: cyan;
    padding-left: 0;
    margin-left: 0;
    float: left;
    width: 100%;
}

ul li {
    display: inline;
}

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

结果：

https://jsfiddle.net/cbaanvzd/

包含float: left和display: inline

的CSS

ul {
    background-color: cyan;
    padding-left: 0;
    margin-left: 0;
    float: left;
    width: 100%;
}

ul li {
    display: inline;
}

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

结果：

https://jsfiddle.net/dy78hzk5/

为什么在第二个示例中浮动元素会调整包含元素的高度？现在有溢出属性或clearfix在这里应用。

Answer 1

我不知道为什么，但是如果你想阻止这种情况，你可以从float: left;的css中删除ul li a并将其放在ul li的css中。

JSFiddle：http://jsfiddle.net/dy78hzk5/1/

Answer 2

你有点不清楚你想要实现什么，但从我的理解，这是你想要的？（检查小提琴）

shell provisioner

CSS

ul {
    background-color: cyan;
    padding-left: 0;
    margin-left: 0;
    float: left;
    width: 100%;
}

ul li {
    display: inline;
    float: left;
}

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

Answer 3

a的填充顶部和底部溢出li的父级，为了解决此问题，只需将相同的填充添加到ul（li的父级。 1}}）。

ul {
	background-color: cyan;
	padding-left: 0;
	margin-left: 0;
	float: left;
	width: 100%;
        padding: 0.2em 0; /* Padding top and bottom that I have added */
}

ul li {
	display: inline;
}

ul li a {
	padding: 0.2em 1em;
	background-color: #036;
	color: white;
	text-decoration: none;
	border-right: 1px solid white;
}

	<div id="nav">
		<ul>
			<li><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水平菜单使用浮动并显示内联给出包含元素的高度

3 个答案: