Question

我正在尝试创建一个高度为40px的简单菜单栏，并填充浏览器宽度的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;
}

任何人都可以解释我为什么会这样，我应该用什么更好的解决方案呢？

Answer 1

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

Answer 2

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

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

<强> jsFiddle example

Answer 3

强迫＆lt;一个＆GT;标签显示为块级元素，它们将填充其容器。

在这种情况下，我还注意到填充停止并溢出＆lt;＆lt;李＆GT;元素。

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

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

Answer 4

首先，我认为你设置了许多不必要的背景颜色。我可以建议你设置合适的吗？如果我理解了您的需求，只需为div #menu和链接（<a>）设置它们。

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

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

作为对您的代码的诊断，最后的建议是，margin padding和<li> margin的{{1}}和<a>不需要设置{{1}}和{{1}}

填充不会填充<li>和<div> interly </div> </li>

4 个答案: