css - 为什么 span 标签被压低了？

Question

body{
  width: 100%;
  height:300px;
  margin: 0px auto;
}
#container {
  width: 50%;
  height:100%;
  border: 15px solid orange; 
  overflow-x: scroll;
  overflow-y: hidden;
  display:inline-block;
  white-space: nowrap;
}
#firstDiv{
  border: 10px solid brown;     
  width: 50%;
  height:100%;
  display:inline-block;
  vertical-align:top;
}
.person_status{
  float:right;
}

<div id="container">
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
</div>

这是我的问题的演示。有谁知道如何处理这个？

我试过对齐顶部，但它不起作用。而且，在 Firefox 中，滚动条在我添加时消失了:white-space: nowrap;

Answer 1

将 float:left 添加到 .person_name 元素。

body{
  width: 100%;
  height:300px;
  margin: 0px auto;
}
#container {
  width: 50%;
  height:100%;
  border: 15px solid orange; 
  overflow-x: scroll;
  overflow-y: hidden;
  display:inline-block;
  white-space: nowrap;
}
#firstDiv{
  border: 10px solid brown;     
  width: 50%;
  height:100%;
  display:inline-block;
  vertical-align:top;
}
.person_name{
  float:left;
}
.person_status{
  float:right;
}

<div id="container">
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
  <div id="firstDiv">
    <span class="person_name">peter</span>
    <span class="person_status">something</span>
  </div>
</div>