作者cgcat (小綿羊趕集)
看板Web_Design
標題[問題] menu置中
時間Mon Oct 7 15:13:45 2013
我想要在一個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
1F：推 Ayukawayen:這跟width有關係 請先參考CSS Box Model 10/07 15:57
2F：→ Ayukawayen:你希望1000px的div裡放五個200px的li 10/07 15:58
3F：→ Ayukawayen:首先 ul li都有預設padding(視瀏覽器而定) 所以width會 10/07 15:59
4F：→ Ayukawayen:更寬,請先把padding歸0; 其次,border寬度是另外算的,所 10/07 16:01
5F：→ Ayukawayen:以最好width設198,border設1.最後,ul也設了1px的border 10/07 16:02
6F：→ Ayukawayen:,所以header要放下整個ul的話,width要設成1002px. 10/07 16:03
7F：→ Ayukawayen:(不然就把ul的border拿掉) 10/07 16:03
8F：→ Ayukawayen:這樣應該會比較接近你想要的效果 :) 10/07 16:04
※ 編輯: cgcat 來自: 114.34.165.184 (10/07 16:10)
9F：推 akiratw:li 不要 float: left 而且改成 inline-block 10/07 16:16
10F：→ akiratw:然後 .header 設定 text-align center。 10/07 16:17
11F：→ cgcat:感謝!解決 10/07 16:41