CSS puts elements on one line of width:33%, the result is two lines of reason

. 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, he, he);    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>    </ Div>

In effect: the div of text 3 is squeezed into the second row.

The reason: The editor line is a small gap between the two elements, the HTML code will be modified as follows OK

  <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>    </div>

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

CSS puts elements on one line of width:33%, the result is two lines of reason