Css places the element in a row of width: 33%, but the result is two rows, css33 %

Css places the element in a row of width: 33%, but the result is two rows, css33 %

.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"> text 1 </div> <div class = "inline-block width33"> text 2 </div> <div class = "inline-block width33"> Text 3 </div>

In fact: the div of Text 3 is pushed to the second row.

The reason is that there is a small gap between the two elements in the editor line feed. It is okay to modify the html code as follows.

<Div class = "bottom-bar"> <div class = "inline-block width33"> text </div> <div class = "inline-block width33"> text </ div> <div class = "inline-block width33"> text </div>

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.