添加了display:inline块，但我的HTML元素仍然溢出到另一行

Question

我想把一些div元素放在同一平面上，所以根据我在这个论坛上得到的建议，我创建了这些元素

<div class="profileField">
    Birthday<br> 
    <div class="select"><div class="select-styled">Select Month</div><ul class="select-options"><li rel="">Select Month</li><li rel="1">January</li><li rel="2">February</li>…<li rel="12">December</li></ul></div>
<div class="select"><div class="select-styled">Select Day</div><ul class="select-options"><li rel="">Select Day</li><li rel="1">1</li>…<li rel="30">30</li><li rel="31">31</li></ul></div>
<div class="select"><div class="select-styled">Select Year</div><ul class="select-options"><li rel="">Select Year</li><li rel="1900">1900</li><li rel="1901">1901</li>…<li rel="2020">2020</li><li rel="2021">2021</li></ul></div>
      </div>

以下是样式，它们都包括"显示：内联块"

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    color: #fff;
    width: 220px;
    height: 42px;
}
.profileField {
        padding: 10px;
        font-family: 'Oxygen', sans-serif;
        font-weight: 300;
        font-size: 20px;
        display: inline-block; 
}

上面放在一个容器中，带有样式

#profileContainer {
    border-radius: 25px;
    background: #000000;
    padding: 10px;
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

但即使这样也有显示：内联块o我不知道为什么这些元素会变成新行。我用这个JSFiddle来证明这个问题——https://jsfiddle.net/4g7r5zt0/6/

Answer 1

将white-space: nowrap添加到此规则，该规则告诉其子代留在1行上

.profileField {
  padding: 10px;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 20px;
  display: inline-block;
  white-space: nowrap;
}

更新的fiddle