作者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