怎么CSS修改网站导航的宽度旁边多余的

html-css012

怎么CSS修改网站导航的宽度旁边多余的,第1张

#head{

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}

百分比不难,烦的是根据设计稿算每个元素的尺寸。