为什么我看到两行而不是一行？

Question

在下面的代码中（小提琴：https://jsfiddle.net/tno3n3cq/），我希望看到一行有两列。相反，我看到两行。

我希望看到一行，因为：

• 左侧和右侧元素显示：内联块，因此不应将它们放在自己的行上。
• 两边的宽度加起来是容器的宽度，所以它们都应该在一条线上。

我的推理在哪里错了？

* {
  box-sizing: border-box;
}

.filelist {
  width: 500px;
}

.bem-file {
  height: 37px;
}

.bem-left-side {
  width: 300px;
  display: inline-block;
}
    
.bem-right-side {
  width: 200px;
  display: inline-block;
}

<div class="filelist">
  <div class="bem-file">
    <div class="bem-left-side">
      left
    </div>
    <div class="bem-right-side">
      right
    </div>
  </div>
</div>

Answer 1

尝试使用此代码，您将缺少display：class filelist的内联属性

＆＃13;

＆＃13;

.filelist {
  width: 500px;
  display: inline;
}

* {
    box-sizing: border-box;
}

.bem-file {
    height: 37px;
}

.bem-left-side {
    width: 300px;
    display: inline-block;
}

.bem-right-side {
    width: 200px;
    display: inline-block;
}
.bem-file-name {
    display: inline;
}
.bem-upload-progress {

}

.alert-icon {
  color: red;
}

/* wuh? this is \e999 in the global icon demo. Did we get an old version? */
.alert-icon:before {
  content: "\e99b";
  color: #d37d7d;
}

＆＃13;

<div  class="filelist">
  <div  class="bem-file bem-file-error">
    <div  class="bem-left-side">
      <span  class="alert-icon"></span> 
      <div  class="bem-file-name">ripgrep-0.5.2-x86_64-apple-darwin.tar</div>
    </div>
    <div  class="bem-right-side">
      <span  class="status-message">File type invalid</span>
      <span  class="bem-upload-progress"></span>
      <span  aria-label="Remove" class="bem-remove-file bem-remove-file-error"></span>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

希望这有帮助

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
}

.filelist {
  width: 500px;
}


.bem-file {
    height: 37px;
    width: 100%;
    background : red;
    position:absolute;
}

.bem-left-side {
    width: 300px;
    display: inline-block;
    background:yellow;
}

.bem-right-side {
    width: 200px;
    display: inline-block;
}

＆＃13;

<div  class="filelist">
  <div  class="bem-file">
    <div  class="bem-left-side">
      left
    </div>
    <div  class="bem-right-side">
      right
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以从CSS中删除bem-left和bem-right的块声明。