【CSS】float横並びメニューに余白ができてしまいます

質問

リストをfoat:leftさせ横並びのメニューを作っています．下記画像の赤枠の幅に（包含されているdivのボーダーを赤線にしています）メニューをぴったり収めたいのですが，左右に余白ができてしまいます．
いろいろネット等で調べてみましたが原因がわかりません．ご教授よろしくおねがいします．
------CSSソース-----------------------------------------------------
/*グローバルナビゲーション */
.globalnavi{
width:770px;
　　height:30px;
　　margin:0;
　　padding:0;
border:1px solid #cc0000;
}

.gloabalnavi ul{
height:30px;
margin:0;
padding:0;
background:#ffffff;
list-style:none;
}

.globalnavi li{
float:left;
margin:0;
padding:0;
}

.globalnavi span{
display:none;
}

.globalnavi a{
height:30px;
display:block;
background-repeat:no-repeat;
}

li#m1{
width:154px;
background-image:url(../image2/menu1.gif);
background-position:0px -30px;
}

li#m1 a{
background-image:url(../image2/menu1.gif);
}

li#m1 a:hover{
background-image:none;
}

li#m2{
width:154px;
background-image:url(../image2/menu2.gif);
background-position:0px -30px;
}

li#m2 a{
background-image:url(../image2/menu2.gif);
}

li#m2 a:hover{
background-image:none;
}

li#m3{
width:154px;
background-image:url(../image2/menu3.gif);
background-position:0px -30px;
}

li#m3 a{
background-image:url(../image2/menu3.gif);
}

li#m3 a:hover{
background-image:none;
}

li#m4{
width:154px;
background-image:url(../image2/menu4.gif);
background-position:0px -30px;
}

li#m4 a{
background-image:url(../image2/menu4.gif);
}

li#m4 a:hover{
background-image:none;
}

li#m5{
width:100px;
background-image:url(../image2/menu5.gif);
background-position:0px -30px;
}

li#m5 a{
background-image:url(../image2/menu5.gif);
}

li#m5 a:hover{
background-image:none;
}
------------------------------------------------------------------
-----HTML ソース--------------------------------------------------
<div class="globalnavi">
<ul>
<li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li>
<li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li>
<li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li>
<li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li>
<li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li>
</ul>
</div><!--div globalnavi finish-->
------------------------------------------------------------------

回答No.4

abril · ベストアンサー

> 全体が左に寄りすぎてHPの背景からはみ出してしまいました．

補足のソースを拝見しましたが、幅830pxのmid-backの領域に対して、幅770pxのglobalnaviの領域が左右方向に均等の余白を持ってセンタリングされず、mid-backの左端に揃って描画されてしまう…という状態と解釈して宜しいですか？

その状況は、IE6/7以外のFirefox等のブラウザで起きていますよね？前者であれば親要素のmid-backの"text-align: center;"の指定が（間違って）効いてしまうので、現状のままでもglobalnaviはセンタリングされていると思いますので…

"text-align: center;"の本来の役目はテキストなどのインライン要素に対するセンタリングであり、ブロック要素（div等）の位置自体をセンタリングする性質は持っていません（IEでの結果は正しくない解釈に依るものです）。それは左右marginをautoにする事で調整できるので、下記の様に修正を加えてみて下さい。

.globalnavi{
（省略）
margin: 0 auto;
（省略）
}

こうする事で、globalnaviはwidthが770pxと決め打ちされているので、親要素のmid-backの830pxの幅から770pxを引いた残りの分（60px）が左右の余白として均等に割り振られる（左マージン30px/右マージン30pxとなります）ので、結果としてセンタリングされて表示されます。

回答No.3

abril

> スペルミスとは，恥ずかしいかぎりです

いえ、結構ある事ですので、なんかいくらやってもおかしい…と思ったら、先ずは設定したCSSのセレクタとHTMLのマークアップがちゃんと対になっているかどうかを確かめてみる、という習慣を付けると良いですよ。

> 全体が左に寄りすぎてHPの背景からはみ出してしまいました．

それは本件とは別の問題ですね。globalnaviの親要素との兼ね合いに不具合があると思われますが、その部分の情報を提供して頂かないとわかりません。

補足

globalnaviの親要素はmid-backでプロパティーは以下の様になっています．
.mid-back{

border:1px solid #cc0000;

width:830px;

margin:0px auto 0px auto;

padding:0px 0px 0px 0px;

background: url(../image/back-mid.gif) repeat-y center ;

text-align:center;

}
なおHTMLは以下の様になっています．よろしくお願いします．
-------------HTML--------------------------------------------------
<div class="mid-back">

<div class="globalnavi">

<ul>

<li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li>

<li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li>

<li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li>

<li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li>

<li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li>

</ul>

</div><!--div globalnavi finish-->

<image src="image/top1.jpg" border="none" >

<div class="mid">

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

</div> <!--div mid finish-->

</div><!--div mid-back finish-->
-------------------------------------------------------------------

回答No.2

abril

CSSにスペルミスがありますね。

.gloabalnavi ul{
（省略）
}

正しくは

.globalnavi ul{
（省略）
}

です。スペルミスの為、HTML側のマークアップに対応しておらず、ulのマージンが初期化されていなかっただけですね。
なので、li#m5のwidthも154pxで正解です。

お礼

スペルミスとは，恥ずかしいかぎりです（汗
修正後，全ての要素がちゃんと表示されましたが，全体が左に寄りすぎてHPの背景からはみ出してしまいました．

回答No.1

abril

実際にサンプルを検証していませんが、提供された情報を見ると単純に計算を間違っていると思いますが。
globalnaviの幅が770pxなのに対し、子要素liの幅の合計が154px×4＋150px＝716pxなのでぴったりに並べるには54px足りません。
下記だけ100pxになっているのは何故ですか？

li#m5{
width:100px;
（省略）
}

補足

当初は5番目の要素もwidth154pxでしたが，それでは余白が現状と同じで5番目の要素が表示されなかったので5番目の要素を表示させようと幅を小さくした結果です．