添加了 display:inline-block，但我的 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>

这里是样式，都包括“display:inline-block”

.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%);
}

但即使这样也有 display:inline-blocks 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;
}

Updated fiddle