所以，我不知道为什么，但是当我向 li 标签添加边距时，它不起作用!所以，li 超过了我在 .topo 类中给出的 10px 边距(查看 jsfiddle 中的示例!)
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Início</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/estilo.css" />
</head>
<body>
<section class="topo">
<figure class="logo-topo">
<img src="imagens/logo-icon.png" width="32px" height="32px"/>
</figure>
<nav class="navegador-topo">
<ul class="lista-topo">
<li class="ativo"><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
</ul>
</nav>
</section>
</body>
</html>
estilo.css
@charset "utf-8";
*{
margin:0px;
padding:0px;
font:100%;
}
.topo {
background-color: #FF5050;
padding-top: 10px;
padding-bottom: 10px;
box-sizing:border-box;
position: relative;
}
.topo::after{
content: "";
clear:both;
display: block;
}
.topo .logo-topo{
float:left;
margin:0px 10px 0px 10px;
}
.topo .navegador-topo{
float:right;
margin:5px 10px 0px 10px;
}
.topo .lista-topo{
list-style: none;
}
.topo .lista-topo li{
display:inline;
font-size: 1.1rem;
font-family: Verdana;
}
.topo .lista-topo li a{
text-decoration: none;
color:#FFF;
border:1px solid #FFF;
padding: 10px;
transition:all 0.5s;
}
.topo .lista-topo li a:hover,.topo .lista-topo li a:focus{
background-color:#FF7373;
}
我将宽度和高度放在 img 中只是为了向您显示图标的空间。
这是 jsfiddle 中的代码:http://jsfiddle.net/ecxraovk/ 谢谢!
最佳答案
长话短说:您没有清除 ul 然后在 anchor 上放置额外的填充，导致它超出 li 元素。填充没有超过边距...它只是应用到比 li 小的 ul 的边距...这有点像 DOM 的工作方式，因为您通过 a 从流中“删除”了它漂浮。我的建议是删除 anchor 上的边框和填充，然后将其添加到 li 中，然后清除 UL 的......那么你的边距可以是 margin: 0 10px;像下面这样的东西:
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
font: 100%;
}
.topo {
background-color: #FF5050;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
position: relative;
}
.topo::after {
content: "";
clear: both;
display: block;
}
.topo .logo-topo {
float: left;
margin: 0px 10px 0px 10px;
}
.topo .navegador-topo {
float: right;
margin: 0 10px;
}
.topo .lista-topo {
list-style: none;
}
.topo .lista-topo li {
display: inline;
font-size: 1.1rem;
font-family: Verdana;
border: 1px solid #FFF;
padding: 10px;
transition: all 0.5s;
margin-left: 10px;
}
.topo .lista-topo li a {
text-decoration: none;
color: #FFF;
}
.topo .lista-topo li:hover,
.topo .lista-topo li:focus {
background-color: #FF7373;
}<section class="topo cf">
<figure class="logo-topo">
<img src="imagens/logo-icon.png" width="32px" height="32px" />
</figure>
<nav class="navegador-topo">
<ul class="lista-topo topo">
<li class="ativo"><a href="#">HOME</a>
</li>
<li><a href="#">HTML</a>
</li>
<li><a href="#">CSS</a>
</li>
<li><a href="#">JAVASCRIPT</a>
</li>
</ul>
</nav>
</section>a 与 li 不同，您看不到 li，因为您没有对其应用特殊样式
关于html - CSS，填充超过边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32238459/