1

http://jsfiddle.net/QewfP/

样式.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;
}

索引.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 中尝试了这段代码。

4

3 回答 3

3

您在这里发生了多个错误。

  • 你不应该div在列表项中有元素
  • 您的 HTML 中有一个没有单位的高度height:73;
  • 您的ul元素不必要地封装在 adiv中，列表项中的链接也是如此。
  • 您正在将内联样式与链接样式表混合。

你能描述更多你想要完成的事情吗，或者你有什么例子吗？

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

此外，这里是相同代码的小提琴，但 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用于左右边距来居中。

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

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

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

于 2012-06-04T17:22:25.113 回答
2

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

我用你的代码设置了一个 jsfiddle，没有看到你所说的差距...... http://jsfiddle.net/qL8Ra/

于 2012-06-04T16:07:12.847 回答
0

小提琴

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

<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;"

而且您可以正确格式化您的代码以获得更高的可读性。

于 2012-06-04T17:12:54.283 回答