如何才能让导航栏的宽度随着浏览器的窗口的变大而变变大，只能用css

发布网友发布时间：2022-04-21 08:18

共2个回答

热心网友时间：2022-04-21 09:47

首先是：<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;}

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

热心网友时间：2022-04-21 11:05

css百分比布局就可以