css puts elements in one line width: 33%, but the result is two lines_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:39:51
Original
1206 people have browsed it

.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;}
Copy after login
 <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>
Copy after login

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>
Copy after login


Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template