为什么在li标签里面设置 高度height的时候 不管设置多少都一样？没有任何变化。而改变宽度width却有变化？
当我不设置 高度height的时候 ，结果是水平居中的。
当我设置 高度为0px的时候 ， 结果是 所有字体都重叠在一起。
当我 把高度只要不设置为0px的时候，比如1px ,100px,10000px的时候， 结果都不变，都是水平居中的？
这是为什么？
7 回答
很好的问题。
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。。然后你就看不到了。。
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>
以下为完整代码
<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>
.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/150
提交
取消
