CSS 元素出现在当前行下方。 怎么修？
[英]CSS element appears below current line. How to fix?
问题描述
I am making some HTML elements as follows:
我正在制作一些 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>
It does not come out as intended, with the textbox getting pushed to the next line as can be seen here:它没有按预期出现，文本框被推到下一行，如下所示：
What went wrong and how can I fix it?出了什么问题，我该如何解决？
4 个解决方案
解决方案1
2 2020-02-11 05:11:51
Use
display: flexto make inline all child elementsdisplay: 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>
解决方案2
0 2020-02-11 05:11:52
This line is your issue:这一行是你的问题：
margin-left: 10%; /* same as Flag width
Your flag takes 10%, your text margin takes 10%, and your text takes 90%.你的旗帜占 10%，你的文字边距占 10%，你的文字占 90%。 110% has to wrap! 110% 必须包装！
解决方案3
0 2020-02-11 05:46:24
Using @Sameer Khan's solution (adding display: flex to parent item) only gets me this:使用@Sameer Khan 的解决方案（将display: flex添加到父项）只会让我得到这个：
Using @Sydney Y's solution only gets me this:使用@Sydney Y 的解决方案只会让我得到这个：
Combined, I got what I want:结合起来，我得到了我想要的：
解决方案4
0 2020-03-08 13:08:45
Here is a bit ancient approach that works as well.这里有一个有点古老的方法也有效。
Use float: left;使用float: left; and box-sizing: border-box;和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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.