設置橫向布局的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樣式結合，只要用別的方式代替實現相同的顯示效果，以此來避免出現這個問題。
