填充不会相互填充 <li> 和 <div>答案

【问题标题】：Padding won't fill the <li> and <div> interly填充不会相互填充 <li> 和 <div>
【发布时间】：2014-06-08 20:20:59
【问题描述】：

我正在尝试创建一个高度为 40 像素并填充 80% 浏览器宽度的简单菜单栏。

这里的问题是我试图使文本居中，但是当使用不同的颜色（一种用于 div，另一种用于 ul，另一种用于 li）查看它时，我看到一个小像素没有被填充<a> 的填充。

填充它的唯一解决方案是将填充设置为 10.35 像素而不是 10 像素或 11 像素。

HTML：

<html>
  <head>
      <meta charset="utf-8" />
      <title>myWebSite</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head> 
  <body>
      <div id="menu">
          <ul>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
              <li>
                  <a href="www.google.com">Hello</a>
              </li>
          </ul>
      </div>
  </body>
</html>

还有 CSS ：

body, html {
    width               : 100%;
    margin              : 0;
}

#menu {
    background-color    : black;
    width               : 100%;
    height              : 40px;
}

ul {
    list-style          : none;
    height              : 100%; 
    background-color    : yellowgreen;
}

li {
    margin              : 0;
    padding             : 0;
    float               : left;
    line-height         : 40px; 
    background-color    : blue;
}

a {
    margin              : 0;
    text-decoration     : none;
    color               : white;
    font-weight         : bold;
    padding             : 10px 5px;
    background-color    : blueviolet; 
}

a:hover {
    background-color    : orange;
}

谁能解释一下为什么会发生这种情况以及我应该使用什么更好的解决方案来做到这一点？

【问题讨论】：

将行高从 40px 改为 39px。
作为所有答案的补充：当您设置宽度和高度之类的百分比值时，您必须记住浏览器最终使用像素。因此，如果您想要 11px 元素的 50% 宽度，一些浏览器会将其设为 5px，而某些浏览器会将其设为 6px。如果您缩放窗口，也可以看到这一点

标签： html css html-lists padding

【解决方案1】：

首先，我认为您设置了很多不必要的背景颜色。我可以建议你设置正确的吗？如果我明白你想要什么，只需将它们设置为 div #menu 和链接 (<a>)。

现在您的问题是您忘记将链接设置为块。为他们使用display: block。这样做并正确调整填充。因此无需为列表项设置line-height。

作为最佳做法的提示，请勿将height 设置为<ul>。使用clearfix method 自然适合其子元素的高度。

作为对代码的诊断，最后的建议是，无需为<li> 设置margin 和padding，为<a> 设置margin。

【讨论】：

【解决方案2】：

通过强制标签显示为块级元素，它们将填充其容器。

在这种情况下，我还注释掉了

元素之外的填充以停止和溢出。

a {
    display: block;
    /*padding             : 10px 5px;*/

    margin              : 0;
    text-decoration     : none;
    color               : white;
    font-weight         : bold;
    background-color    : blueviolet; 
}

【讨论】：

【解决方案3】：

删除链接的顶部和底部填充并使用此 CSS：

a {
    margin : 0;
    text-decoration : none;
    color : white;
    font-weight : bold;
    padding : 0px 5px;
    background-color : blueviolet;
    display:block;
    height:40px;
}

jsFiddle example

【讨论】：

【解决方案4】：

将display:block 添加到a 元素，然后去掉垂直填充。 http://jsfiddle.net/L8dpB/

【讨论】：