[問題] menu置中

[cgcat (小綿羊趕集)]

我想要在一個1000px的div裡面置中一個menu

top  about  clients  services  faq

而這五個連結都要左右間距相同的menu應該怎麼做呢?

css:

.header {
        color:#999;
        margin:0 auto;
        padding:0;
        width:1000px;
        border:1px solid #ccc;
        height:500px;
}
.header ul {
        margin:0 auto;
        list-style:none;
        line-height:1.0;
        border:1px solid #000;
}
.header li {
        display:block;
        float:left;
        text-transform:uppercase;
        font-size:x-small;
        width:200px;
        text-align:center;
        border:1px solid #000;
}

body:

<div class="header">
        <ul>
        <li>about</li>
        <li>clients</li>
        <li>services</li>
        <li>faq</li>
    </ul>
</div>

小弟是這樣做的，但似乎有錯

可以麻煩版上的高手幫我看看嗎?

謝謝

抱歉!忘記說明border是我為了看HTML的呈現效果所下的
如果li沒有設定寬度的話能夠呈現我想要的效果嗎?

謝謝

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.165.184
推 Ayukawayen:這跟width有關係 請先參考CSS Box Model
→ Ayukawayen:你希望1000px的div裡放五個200px的li
→ Ayukawayen:首先 ul li都有預設padding(視瀏覽器而定) 所以width會
→ Ayukawayen:更寬,請先把padding歸0; 其次,border寬度是另外算的,所
→ Ayukawayen:以最好width設198,border設1.最後,ul也設了1px的border
→ Ayukawayen:,所以header要放下整個ul的話,width要設成1002px.
→ Ayukawayen:(不然就把ul的border拿掉)
→ Ayukawayen:這樣應該會比較接近你想要的效果 :)
※ 編輯: cgcat           來自: 114.34.165.184       (10/07 16:10)
推 akiratw:li 不要 float: left 而且改成 inline-block
→ akiratw:然後 .header 設定 text-align center。
→ cgcat:感謝!解決