这里为啥给nav设置了宽度就能实现当缩小窗口时a标签能不换行呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
.nav{width:505px;margin:0 auto;}
ul{ list-style:none;}
a{color:#333;text-decoration:none}
.nav li{float:left;}
.nav li a{ display:block; text-align:center; height:30px; line-height:30px; width:100px; background-color:#efefef; margin-left:1px;}
.nav li a:hover{ background-color:#F60; color:#fff}
</style>

</head>
<body>

<ul class="nav">
    <li><a href="#">首　　页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>

</body>
</html>

福尔摩牙

2016-03-13

源自：导航条菜单的制作 2-3

关注问题我要回答

1915

操作

收起

3 回答

DQJ俊逸回答被采纳 +3 积分
2016-07-22

不是由于你设置了宽他就换行了是你设置了足够长的宽他才换行的你有5个li，每个li的width是100px 也就是说你ul的width小于500px的时候他就会被挤下来

你没给ul设置width的时候他就是100%，默认是父元素的如果他的向上每一个父元素都没有设置就是浏览器的width 所以当你缩小窗口的时候也就改变了ul的width，不够宽就被挤下来了

0 回复有任何疑惑可以回复我~

#1

不是由于你设置了宽他就不换行了是你设置了足够长的宽他才不换行的

2016-07-22 回复有任何疑惑可以回复我~

#2

福尔摩牙提问者

非常感谢！

2016-07-25 回复有任何疑惑可以回复我~

漠然的笑
2016-03-16

nav盒子如果固定了宽度之后，a标签是包含在nav盒子里的，没办法把它水平撑开，所以。。。

0 回复有任何疑惑可以回复我~

Linus海外SEO流量玩家
2016-03-13

个人观点，有错请矫正：

width不设置或为0的时候为100%，因此没有固定宽度，缩小窗口会使li换行。你可以在里面加height:200px来观察一下设置width和不设置的区别。

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

导航条菜单的制作

参与学习 123899 人
解答问题 813 个

水平、垂直、圆角导航条菜单，让您的技术探索之路更高效

这里为啥给nav设置了宽度就能实现当缩小窗口时a标签能不换行呢？

我要回答关注问题

意见反馈帮助中心 APP下载