html - 无法在导航栏 CSS 中使用填充
问题描述
我有一个简单的导航栏。有一个标题,然后是一个包含所有代码的容器。
我想要做的是添加padding
到li
项目中。当我这样做时,它只是将它添加到左侧和右侧,而不是顶部。我一直在尝试修复它,我注意到如果我在里面放置填充header nav
而不是header nav ul li
它会起作用。另外,如果我添加float :left
到header nav ul li
.
我只想知道为什么我必须添加float: left
才能header nav ul li
使填充起作用?
.container {
width: 80%;
margin: 0 auto;
}
#brand {
float: left;
}
header nav {
float: right;
}
header nav ul li {
display: inline;
}
<header>
<div class="container">
<div id="brand">
<h1>test</h1>
</div>
<nav>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>
</header>
解决方案
尝试使用display: inline-block
.container {
width: 80%;
margin: 0 auto;
font-family: Arial;
}
#brand {
float: left;
}
header nav {
float: right;
}
nav a {
color: gray;
text-decoration: none;
}
header nav ul li {
display: inline-block;
padding: 10px;
}
<header>
<div class="container">
<div id="brand">
<h1>test</h1>
</div>
<nav>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>
</header>
推荐阅读
- react-native - 变量“”已强制非空类型“字符串”的空值!”GraphQl 错误
- c# - 检查哪个玩家从骰子中获得了最高的赌注
- testing - 如何在每个测试用例之后向端点发送附加请求
- for-loop - 如何检查一个按钮是否被按下,以便禁用另一个按钮 | 扑
- c - 如何在 C 中编写和读取包含另一个结构的结构?
- java - 有没有办法在java中读取原始midi数据?
- swift - Cocoapods 加载错误。$ pod init -> 加载错误
- angular - Jhipster - Angular 接收其他用户的导航
- webpack - Nuxt/Vue-meta:info.meta.filter 不是函数
- swift4 - 从 PHAsset 问题中获取图像以检测图像的更新