記事参照
No.0 2009/05/17 06:40
題：ヘッダーとメニューバーの幅の違い
名：しん
ID：jZBaPGySkok0
ヘッダーの下にメニューバーをおいています。
メニューバーは5項目あり、各項目幅151px。
右側に1pxのボーダーを入れています。
最後の項目の右側のボーダーは"なし"にしています。
(151 x 5) + 4 = 759
この幅に合わせてヘッダー（全体幅）を759pxに設定しているのですが、幅が合いません。（メニューバーが少し短くなってしまいます）
ちなみに各項目の幅を152にすると全体の幅は760でも大丈夫のようです。
ブラウザーで確認するとピッタリ来ています。
ただ『ページ編集』ではズレが生じています。
メニューバーは箇条書きを回り込みで横一列にしています。
↓参考として
<html>
<ul id="menu">
<li><a href="toppage">トップページ</a>
<li><a href="konnichiha">こんにちは</a>
<li><a href="ohayou">おはよう</a>
<li><a href="konnbnwa">こんばんは</a>
<li class="menulast"><a href="odaijini">お大事に</a>
</ul>
<css>
div#container{
width : 759px;
}
ul#menu li{
list-style-type : none;
float : left;
}
ul#menu{
padding-left : 0px;
margin-left : 0px;
font-size : 0.75em;
background-color : #0071e1;
height : 30px;
margin-top : 0px;
margin-bottom : 30px;
}
ul#menu li a{display : block;
line-height : 30px;
color : white;
text-decoration : none;
text-align : center;
width : 151px;
background-color : #003a75;
border-right-width : 1px;
border-right-style : solid;
border-right-color : white;
}
ul#menu li a:hover{
background-color : #0071e1;
}
ul#menu li.menulast a{
border-right-style : none;
}
なぜ759pxの幅では合わないのかなやんでおります。
どなたかアドバイスよろしくお願いします。
ホームページビルダー13を使用しています。
掲示板に戻る