設(shè)置橫向布局的ul li時(shí)若li使用
display:inline-block會(huì)因?yàn)閾Q行符而使相鄰的li出現(xiàn)間距
將ul的字體設(shè)置為0同時(shí)在li中重新設(shè)置需要的字體大小可以解決上述問題，但若在下面的情況下，會(huì)多出下間隙
<!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外面包裹了一個(gè)盒子，盒子設(shè)置了行高（注意是行高不是高度）而ul又未設(shè)置高度，則其高度會(huì)隨其父盒子，同時(shí)li和ul會(huì)有一個(gè)下間隙。
解決
- 不給li設(shè)置字體大小，而是在li中再包一層盒子，給內(nèi)層盒子設(shè)置字體大小
- ul的父盒子不設(shè)置行高，而用height代替，之后ul、li高度設(shè)置為100%
總的來說，要出現(xiàn)這樣奇怪的現(xiàn)象需要特定的html結(jié)構(gòu)和css樣式結(jié)合，只要用別的方式代替實(shí)現(xiàn)相同的顯示效果，以此來避免出現(xiàn)這個(gè)問題。
