本文探讨了在CSS布局中，当span元素设置为inline-block时，为何会出现换行现象，以及如何通过调整HTML结构或使用word-spacing属性来解决这一问题，确保元素在同一行正确显示。
来看一个简单的案例，div 中包含两个 span ，span 设置为 inline-block ：
<!DOCTYPE html>
<head>
<style>
div {
width: 500px;
height: 100px;
background-color: pink;
}
span {
display: inline-block;
width: 50%;
height: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
</div>
</body>
</html>
以上案例是这样显示的：
两个 span 的宽度为 div 的 50%，理论上空间刚好够用，但是为什么两个 span 没有在同一行上显示呢？
答案是：因为两个 span 标签换行了：
<span>1</span>
<span>2</span>
解决办法是这样写：
<span>1</span><span>2</span>
原理
行内元素和行内块元素换行后之间会有一个间隙
行内元素：
行内块元素：
正是这个间隙导致 div 的子元素宽度之和大于了 100%，间隙的宽度为 5px，所以也可用下面的方法解决此问题，给父盒子添加属性 word-spacing:-5px
<div style="word-spacing:-5px">
<span>1</span>
<span>2</span>
</div>
扫一扫
2832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
