时间戳

首页 > 解决方案 > CSS 元素出现在当前行下方。怎么修？

html - CSS 元素出现在当前行下方。怎么修？

问题描述

我正在制作一些 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>

它没有按预期出现，文本框被推到下一行，如下所示：

图像

出了什么问题，我该如何解决？

标签： htmlcss

解决方案

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

推荐阅读