CSS は要素を 1 行幅に配置します: 33% ですが、結果は 2 行になります_html/css_WEB-ITnose

.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 が 2 行目に押し込まれます。

理由: エディターの改行で 2 つの要素の間に小さなギャップがあります。HTML コードを次のように変換しても問題ありません。

著作権表示: この記事は by によるオリジナル記事です。ブロガーの許可なく複製することはできません。