手機端h5頁面,消除行內塊級元素(inline-block)間距的有效辦法

NO IMAGE

博主在做專案的時候,遇到行內塊級元素因為換行帶來的間隙的問題。在PC端時,使用父級元素新增樣式:letter-spacing:-0.5em,直接子代元素新增樣式:letter-spacing:normal;可以很容易的解決間隙帶來的問題,但是在手機端採用通用的方式,並沒有生效。經過多種方法比對之後,最有效的辦法如下:

// 父級元素標籤,新增樣式 font-size: 0;保險起見,額外再加上letter-spacing:-0.5em;

 ul {
width: 100%;
height: 4rem;
letter-spacing: -0.5em;
font-size: 0;
}

//直接子代元素,新增樣式font-size: xx;此外,letter-spacing: normal

ul li {
letter-spacing: normal;
display: inline-block;
vertical-align: top;
font-size: 1.2rem;
}

此方法對於消除手機端行內塊級元素間隙的問題很有效。