设置横向布局的ul li时若li使用
display:inline-block会因为换行符而使相邻的li出现间距
将ul的字体设置为0同时在li中重新设置需要的字体大小可以解决上述问题，但若在下面的情况下，会多出下间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
line-height: 3rem;
}
ul {
margin: 0;
padding: 0;
font-size: 0;
}
li {
list-style: none;
font-size: 12px;
display: inline-block;
}
a {
display: inline-block;
padding: 0 1.5rem;
}
</style>
</head>
<body>
<div>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</body>
</html>
ul外面包裹了一个盒子，盒子设置了行高（注意是行高不是高度）而ul又未设置高度，则其高度会随其父盒子，同时li和ul会有一个下间隙。
解决
- 不给li设置字体大小，而是在li中再包一层盒子，给内层盒子设置字体大小
- ul的父盒子不设置行高，而用height代替，之后ul、li高度设置为100%
总的来说，要出现这样奇怪的现象需要特定的html结构和css样式结合，只要用别的方式代替实现相同的显示效果，以此来避免出现这个问题。
网友评论