.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>
版权声明：本文为博主原创文章，未经博主允许不得转载。
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
688
收藏
