我正在尝试构建CSS导航栏,但我遇到了一点麻烦。在我的代码中,背景框正在折叠,其中包含其中的内容。我的问题是为什么它会崩溃,可以通过不给盒子高度来解决吗?这是我的代码。.HTML
<div class="item">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
.CSS
body {
color: #648;
}
.item ul {
list-style: none;
padding: 0;
margin: 0;
}
* {
}
.item {
padding: 20px;
width: 70%;
/* height: 65px; */
background-color: blanchedalmond;
margin: 50px auto;
border-radius: 10px;
}
.item li {
float: left;
width: 45px;
margin: 10px;
border-radius: 10px;
padding: 20px;
background-color: aqua;
}
使用 display:inline
或 display:inline-block
而不是 float:left
。
http://jsfiddle.net/x2ubrrh3/
更新使用display:flex
时,您必须停止元素在列表完成后浮动(clear:both
)
看这里: http://jsfiddle.net/x2ubrrh3/1/