width:100%
height:70px
background:url(../img/head.jpg) repeat-x bottom
border-bottom:0px solid #FFB6C1
}
这个部分的 width:100%修改成 width:你的网站宽度px
另添加一句:margin:0 auto
#nav ul {list-style:nonemargin:0padding:0}ul 默认是有一个居左的距离的。
这样 #nav { width:306pxmargin:0 auto}
设置为 306px 就没有问题了。
首先是:<li><a>link</a></li>而不是:<a><li>link</li></a>
然后你外面 ul 宽度设置成百分比了以后,里面 a 标签先 display: block接下来 a 宽度也要设成百分比,外面的 li 不要宽度(里面 a 设 block 了以后会撑开 li),li 标签只 float 或 display: inline-block即可,li 标签可以加内外边距来撑开两个 li 直接距离,如果距离不是一两个像素的话,这种内外边距也要是百分比尺寸。
<ul id="nav">
<li><a>123</a></li>
<li><a>456</a></li>
<li><a>789</a></li>
</ul>
#nav{
width: 100%
background: #333
}
#nav a{
display: block
width: 32%
background: yellow
}
#nav li{display: inline-block}
百分比不难,烦的是根据设计稿算每个元素的尺寸。