.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>
Actual effect: The div of text 3 is squeezed into the second row.
The reason: There is a small gap between the two elements in the editor's line break. Just modify the html code as follows
<div class="bottom-bar"> <div class="inline-block width33">文字</div><div class="inline-block width33">文字</div><div class="inline-block width33">文字</div> </div>
Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.