.inline-block {
display: inline-block;
}
.width33 {
text-align: center;
width: 33%;
box-sizing: border-box;
border-left: 1px solid white;
}
.bottom-bar {
position: fixed;
bottom: 0px;
width: 100%;
background: rgb(239, 73, 99);
height: 50px;
}
<div class="bottom-bar">
<div class="inline-block width33">文字1</div>
<div class="inline-block width33">文字2</div>
<div class="inline-block width33">文字3</div>
</div>
实际上效果:文字3的div被挤到了第二排。
究其原因:编辑器换行会是的两个元素之间有个小空隙,把html代码进行如下改造就OK了
<div class="bottom-bar">
<div class="inline-block width33">文字</div><div class="inline-block width33">文字</div><div class="inline-block width33">文字</div>
</div>