1

http://jsfiddle.net/QewfP/

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>

ヘッダーdivとnavigationBarの間にギャップがあるのはなぜですか？私のコードに対する他のコメントやアドバイスを歓迎します。

悲惨なギャップはWebブラウザで発生します画像（なぜjsFiddleではないのですか？）、私はFirefoxとIEでこのコードを試しました。

4

3 に答える 3

3

ここで複数の間違いが起こっています。

  • 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左右の余白を使用して中央に配置しました。

理想的には、これらのプロパティをbody要素自体に与えるのではなく、おそらくbodyの内部にある種のコンテナを使用したでしょう。しかし、簡単にするために、私はスタイルを直接適用しました。

navigationBarリストの周りのクラスでのdivの目的は何であるかなど、要素をできるだけ多く追加しないことをお勧めします。代わりに、list要素のスタイルを設定できます。

必要なマークアップのみを用意し、スタイルをフックするためだけに使用されるマークアップを避けるようにすることが重要です。

于 2012-06-04T17:22:25.113 に答える
2

liの中にdivを入れるべきではありません。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 に答える