我正在尝试构建 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
。
更新
当使用 display:flex
时,您必须在列表完成后停止元素 float (clear:both
)
关于html - 在 CSS 导航样式方面需要帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27472986/