Question

所以，我不知道为什么，但是当我为li标签添加保证金时它不起作用！所以，li超过了我在课堂上提供的10px余量.topo（看看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/ 谢谢！

Answer 1

长话短说：你没有清除ul，然后你在锚上加上额外的填充物，导致它超出了li元素。填充不会超过边距...只是边距被应用于ul，它比li更小......它有点像DOM的工作方式，因为你通过一个“从流程中”移除了它浮动。我的建议是删除锚点上的边框和填充，然后将其添加到li的，然后清除UL的...然后您的边距可以是边距：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的，因为你没有应用特殊的造型

CSS，填充超出边距

1 个答案: