Question

的style.css

body {
    background-color: #666666;
    margin-left:500px;
    margin-right:500px;
    margin-top:10px;
    margin-bottom:20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    font-size:12px; 
    color:white;
}

div.header {
    background-color: #333333;  
}

div.navigationBar {
    border:0;
    border-style:solid;
    background-color:#112211;  
}

div.navigationButton {
    border:1px;
    border-color:#ffffff;
    border-style:solid;
    background-color:#112211;
    padding:15px;
    width:100px;
    height:40px;
    text-transform:uppercase;
    overflow:hidden;
    font-weight:bold;
    text-align:center;
}

.navigationBar ul {
    list-style-type:none;   
    padding:1px;
}

.navigationBar li {
    display:inline;
    float:left; 
}

.navigationButton a
{
    text-decoration:none;
    color:#eec600;
    display:block;
}


.navigationButton a:link {
    text-decoration:none;
}


.navigationButton a:hover {
    color:#ffe811;
}

的index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="pl" http-equiv="Content-Language">
  <link rel="stylesheet" type="text/css" href="style.css"/> 
</head>
<body>
  <div class="header" style="height:200px; width: 800px;"></div>
  <div class="navigationBar" style= "height:73px; width: 800px;" > /* added unit to the height property */
    <ul>
      <li><div class="navigationButton" ><a href="#link1">Button1</a></div></li>
      <li><div class="navigationButton" ><a href="#link2">Button2</a></div></li>
      <li><div class="navigationButton" ><a href="#link3">Button3</a></div></li>
    </ul>
  </div>
</body>
</html>

为什么header div和navigationBar之间存在差距？欢迎对我的代码提出其他意见和建议。

在网络浏览器中出现了可怜的差距（为什么不在jsFiddle中？），我在Firefox和IE中尝试了这个代码。

Answer 1

你在这里犯了多个错误。

您不应在列表项中包含div个元素
您的HTML height:73;
您的ul元素被不必要地封装在div中，您的列表项中的链接也是如此。
您正在使用链接样式表混合内联样式。

您能描述一下您想要完成的更多内容，或者您有任何示例吗？

我以更加跨浏览器兼容的方式重新创建了我认为你想要的东西，让我知道你的想法。

此外，这里是相同代码的小提琴，但将CSS拆分为单独的文件：http://jsfiddle.net/FsvJ3/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example</title>

  <style type="text/css">
    html {
      padding: 0;
      margin: 0;
      background: #555;
    }

    body {
      width: 800px;
      margin: 0 auto;
    }

    #header {
      width: 100%;
      height: 200px;
      background: #222;
    }

    #nav {
      background: #0e1a0c;
      width:100%;
      float: left;
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #nav li {
      float: left;
      width: 100px;
      height: 40px;
      padding: 15px;
      border: 1px solid white;
    }

    #nav li a {
      color: yellow;
    }
  </style>

</head>
<body>
  <div id="header"></div>

  <ul id="nav">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
  </ul>
</body>
</html>

我想补充一点，你试图将内容集中在页面中的方式（身体两侧有边距）会产生非常奇怪的行为。我通过明确设置宽度来居中，并使用auto作为左右边距。

理想情况下，我可能在身体内部使用了一种容器，而不是将这些属性赋予身体元素本身。但为了简单起见，我直接应用了这些风格。

我建议不要添加尽可能多的元素，比如列表中navigationBar类的div的目的是什么？您可以改为设置列表元素的样式。

重要的是只需要你需要的标记，并尽量避免仅用于挂钩样式的标记。

Answer 2

你不应该把div放在li里面你可以只分配一类navigationButton

我设置了一个jsfiddle与您的代码，我没有看到你谈论的差距...... http://jsfiddle.net/qL8Ra/

Answer 3

Fiddle

我不明白灰色标题和导航栏之间的间隙。并评论代码？是的，基思提到你可以使用

<li> class="navigationButton" ><a href="#link1">Button1</a></li>
<li> class="navigationButton" ><a href="#link2">Button2</a></li>
<li> class="navigationButton" ><a href="#link3">Button3</a></li>

而且你已经有了一个样式表，不使用内联样式，如style="height:200px; width: 800px;"

您可以正确格式化代码以提高可读性。

作为按钮栏的文本块

3 个答案: