css把元素放在一行 width: 33% ，结果却是两行的原因_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 11:39:51

原創

1221 人瀏覽過

.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>

登入後複製

相關標籤：

css把元素放在一行 width: 33% ，结果却是两行的原因

來源：php.cn

上一篇：百度地图简单使用--添加折线，圆形等（html，js）_html/css_WEB-ITnose 下一篇：HTML5实现手势屏幕解锁_html/css_WEB-ITnose

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章