为什么在li标签里面设置高度height的时候不管设置多少都一样？没有任何变化。而改变宽度width却有变化？-慕课网

首页课程实战体系课手记专栏慕课教程

为什么在li标签里面设置高度height的时候不管设置多少都一样？没有任何变化。而改变宽度width却有变化？

来源：3-7 编程练习

闹钟___你别闹

2015-12-12 17:16

当我不设置高度height的时候，结果是水平居中的。

当我设置高度为0px的时候，结果是所有字体都重叠在一起。

当我把高度只要不设置为0px的时候，比如1px ,100px,10000px的时候，结果都不变，都是水平居中的？

这是为什么？

写回答关注

7回答

慕男婶

2015-12-12 19:35:18

已采纳

很好的问题。
a、如果同时设置了height和line-height，那么元素的实际高度即为height；
b、如果只设置了line-height，那么元素的实际高度等于line-height；
如果你把height设置为0，说明元素没有高度，虽然你也设置了line-height:30px，由a可知，同时设置了height和line-height，高度就是height，所以此时元素的实际高度就是0，如果没有高度的话，浏览器特别懒，虽然你有宽度，但是我也不会把你渲染成一个块的。所以你会看到所有的字体叠在了一起。
那为什么height设置成1px就可以了呢？蚊子腿也是肉，不是么？虽然height只有区区1px，但至少也是有高度的啊。所以此时浏览器会把每个li渲染成块，所以你并没有看到字体叠在一起。
你可能会问为什么高度为0或1时，高度这么小应该容纳不下字体才对啊？为什么还能显示呢？
那是因为浏览器的overflow默认值为visible
你可以设置成overflow:hidden。。然后你就看不到了。。

2 7

闹钟___你...

想了想，又试了试。您的回答很详细，通俗。谢谢！

2015-12-12 22:01:36

共 2 条回复 >
孤独离人

2018-06-13 21:22:46
```
酷酷酷酷酷
```
0 0
淡淡的05361

2016-09-14 10:45:31

其实是有变化的，你把li标签加个背景颜色就能看出变化了，只不过你没加背景，看不出而已。

0 0
qq_秀雨_0

2016-04-08 21:03:43

ul li
{
width:50px;
height:30px;
text-align:center;
float:left;
line-height:30px;
list-style-type:none;
}

li a:link,li a:visited
{
text-decoration:none;
color:black;
}

li a:hover,li a:active
{
text-decoration:none;
color:white;
background-color:#BE3948;
}

</style>
</head>

<body>
<h3>课程难度</h3>
<ul class="nav">
<li><a href="#">全部</a></li>
<li><a href="#">初级</a></li>
<li><a href="#">中级</a></li>
<li><a href="#">高级</a></li>
</ul>

0 0
闹钟___你别闹

2015-12-12 18:19:48

以下为完整代码

<style type="text/css">
/*在此定义相关样式，控制列表的显示形式*/
.l li{width:50px;height:30px;text-align:center;line-height:30px;float:left;list-style-type:none;}
.l li a:link ,a:visited
{
    text-decoration:none;
    color:purple;
}
.l li a:hover ,a:active
{
    text-decoration:none;
    color:white;
    background:#BE3948;
    display:block;
}
</style>
</head>

<body>
<h3>课程难度</h3>
<ul class="l">
   <li><a href="www.imooc.com">全部</a></li>
   <li><a href="www.imooc.com">初级</a></li>
   <li><a href="www.imooc.com">中级</a></li>
   <li><a href="www.imooc.com">高级</a></li>

</ul>

0 0
闹钟___你别闹

2015-12-12 18:17:00

.l li{width:50px;height:30px;text-align:center;line-height:30px;float:left;list-style-type:none;}

此为上方代码的效果。
.l li{width:50px;height:0px;text-align:center;line-height:30px;float:left;list-style-type:none;}

此为上方代码的效果。
.l li{width:50px;text-align:center;line-height:30px;float:left;list-style-type:none;}
这是不设置高度的时候的效果。
.l li{width:50px;height:1px;ext-align:center;line-height:30px;float:left;list-style-type:none;}
这个是随便设置高度的时候。

0 0
慕男婶

2015-12-12 17:45:07

贴代码

0 0