0

私はウェブサイトのヘッダーに取り組んでいます。ヘッダーを中央に配置する方法については、stackoverflow を参照してください (ロゴとナビゲーション バーを含む)。

私は Dreamweaver CC を使用しています。プレビュー ボタンをクリックすると、ブラウザの中央に表示されますが、右側には左側よりも余白があります。

私の現在のCSS：

.container { 
    width: 1000px; 
    margin-right: auto;
    margin-left: auto;
    text-align: center; 
}

.header_left { 
    float: left; 
    width: 300px;
}

.navi { 
    float: right; 
    width: 600px;
}

.navi li {
    list-style: none;
    display: inline;
}

私の現在のHTML：

<body id="home">
    <div id="header">
        <div class="container">
            <div class="header_left">
  <a href="#"><img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/></a>
        </div>
            <div class="header_right">
                <ul class="navi">
                    <li><a href="#"><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></a></li>
                    <li><a href="#"><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></a></li>
                </ul>
                    <div style="clear: both"></div>
            </div>
   </div>

編集：それがどのように見えるかのサンプル

4

5 に答える 5

1

text-align:center と float は相性が悪い :)

これをテストします: ul をインラインブロック要素として設定し、フローティングではありません: http://jsfiddle.net/zz2Dy/2/ 

.container { 
    width: 1000px; 
    margin-right: auto;
    margin-left: auto;
    text-align: center; 
    background:#333;
}

.header_left { 
    float: left; 

}

.navi { 
    display:inline-block;
    padding:0;
    margin:0;

}

.navi li {
    list-style: none;
    display: inline;
}
于 2013-06-21T17:11:50.713 に答える
1

右側のヘッダー要素にはプロパティtext-align: centerがあり、要素の幅全体を占めていないため、右側により多くの空白ができます。あなたのフィドルにクラスを追加すると：

.header_right {
    text-align: right;
}

これにより、右側の空白が削除されます。

（あなたの問題を正しく理解していれば）

于 2013-06-21T17:12:11.167 に答える