2

さて、これはすべて 1 つの 139 ピクセルの高さのヘッダーにあるはずで、dreamweaver ではそのようにレンダリングされますが、ブラウザーで表示するとすぐに、メニュー div が 2 行目に分割されます。

HTMLは次のとおりです。

<div id="header">
    <div id="header2">
        <div id="title">
            <a href="index.html"><img src="titleimg.png" border="0" /></a>
        </div>
        <div id="menu">
        <div id="one"></div>
            <div id="two"></div>
            <div id="three"></div>
            <div id="four"></div>
            <div id="five"></div>
        </div>
   </div>
</div>

CSS は次のとおりです。

#header {
    top: 0;
    left: 0;
    position: fixed;
    height: 139px;
    width: 100%;
    background-image: url('headerbg.png');
    border-bottom: solid 1px #797978;
    text-align: center;
    display: inline-table;
}
#header2 {
    width: 1040px;
    margin: 0 auto;
    text-align: left;
}
#title {
    padding-top: 27px;
    width: 287px;
    height: 112px;
    background-image: url('title3d.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    float: left;
}
#menu {
    width: 753px;
    height: 13px;
    border-left: solid 1px #474747;
    display: inline-table;
}
#one {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#two {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#three {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#four {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}
#five {
    width: 19%;
    height: 139px;
    border-right: solid 1px #474747;
    float: left;
}

助けていただければ幸いです。

4

3 に答える 3

2

#menu と #title の幅を合計するだけで合計幅が 1040px であると誤解していますが、#menu に 1px の境界線が残っていることを忘れているため、幅が 1041 になり、プッシュされます。以上。したがって、メニューまたはタイトルの幅のいずれかを 1 ピクセル縮小すれば問題ありません :)

また、#one、#two などで同じコードを繰り返す場合は、メニュー要素の css にいくつかのコードを保存できます。

#menu > div {
    width:19%;
    height:139px;
    border-right: solid 1px #474747;
    float:left;
}
于 2013-08-09T08:45:58.403 に答える
0

私はあなたのコードを少し調整して、それを正気にしました。

http://jsfiddle.net/gwfQt/

実際に直面している問題は、ヘッダーの幅である 1040px の幅を完全に#title分割していることです。ただし、DIV withinに境界線が#menuあることを考慮していませんでした。#menu

また、さまざまな div に繰り返しのスタイルがある場合は、クラスを使用することをお勧めします。より良いコードで回答を改善できるかどうか教えてください。

于 2013-08-09T08:55:33.773 に答える