CSS 元素出現在當前行下方。 怎么修？

Question

我正在制作一些 HTML 元素，如下所示：

 .rc-CN-Item { height: 4em; background-color: rgb(240, 240, 240); } .rc-CN-ItemFlagVisible { width: 10%; height: 100%; background-color: rgb(0, 160, 240); display: inline-block; } .rc-CN-ItemTextbox { margin-left: 10%; /* same as Flag width*/ width: 90%; /* 100 - Flag width*/ display: inline-block; background-color: rgb(100, 160, 240); font-family: Arial; font-size: 1.25em; letter-spacing: .125em; }

 <!-- Block--> <div class="rc-CN-Block"> <!-- Item --> <div class="rc-CN-Item"> <!-- Flag --> <div class="rc-CN-ItemFlagVisible"> </div> <!-- Textbox --> <div class="rc-CN-ItemTextbox">Home </div> </div> </div>

它沒有按預期出現，文本框被推到下一行，如下所示：

出了什么問題，我該如何解決？

Answer 1

使用display: flex內聯所有子元素

 .rc-CN-Item { height: 4em; background-color: rgb(240, 240, 240); display: flex; } .rc-CN-ItemFlagVisible { width: 10%; height: 100%; background-color: rgb(0, 160, 240); display: inline-block; } .rc-CN-ItemTextbox { margin-left: 10%; /* same as Flag width*/ width: 90%; /* 100 - Flag width*/ display: inline-block; background-color: rgb(100, 160, 240); /*margin: 1.25em .625em 2.5em; top, right, bottom, left */ font-family: Arial; font-size: 1.25em; letter-spacing: .125em; }

 <!-- Block--> <div class="rc-CN-Block"> <!-- Item --> <div class="rc-CN-Item"> <!-- Flag --> <div class="rc-CN-ItemFlagVisible"> </div> <!-- Textbox --> <div class="rc-CN-ItemTextbox">Home </div> </div> </div>

Answer 2

這一行是你的問題：

margin-left: 10%;  /* same as Flag width

你的旗幟占 10%，你的文字邊距占 10%，你的文字占 90%。 110% 必須包裝！

Answer 3

使用@Sameer Khan 的解決方案（將display: flex添加到父項）只會讓我得到這個：

使用@Sydney Y 的解決方案只會讓我得到這個：

結合起來，我得到了我想要的：

Answer 4

這里有一個有點古老的方法也有效。

使用float: left; 和box-sizing: border-box;

 .rc-CN-Item { height: 4em; background-color: rgb(240, 240, 240); } .rc-CN-ItemFlagVisible { width: 10%; height: 100%; background-color: rgb(0, 160, 240); float: left; } .rc-CN-ItemTextbox { /* same as Flag width*/ width: 90%; height: 100%; /* 100 - Flag width*/ display: inline-block; background-color: rgb(100, 160, 240); font-family: Arial; box-sizing: border-box; font-size: 1.25em; letter-spacing: .125em; padding: 5px; }

 <!-- Block--> <div class="rc-CN-Block"> <!-- Item --> <div class="rc-CN-Item"> <!-- Flag --> <div class="rc-CN-ItemFlagVisible"> </div> <!-- Textbox --> <div class="rc-CN-ItemTextbox">Home </div> </div> </div>