communauté Apprendre Bibliothèque d'outils Loisirs

Français

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

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

WBOY

Libérer： 2016-06-24 11:39:51

original

1221 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

实际上效果：文字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>

Copier après la connexion

Étiquettes associées：

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

source：php.cn

Article précédent：百度地图简单使用--添加折线，圆形等（html，js）_html/css_WEB-ITnose Article suivant：HTML5实现手势屏幕解锁_html/css_WEB-ITnose

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur