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

我想在同一个平面上保留一些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>

上面是一个容器，带有样式

#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我不确定为什么这些元素会向下移动到新行。我用这个JSFIDLE来演示这个问题-

将空白：nowrap添加到这个规则中，它告诉它的孩子们保持在线

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

---

将

空白：nowrap

添加到此规则中，该规则告诉其子项保持在1行

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

---

您好，我在中添加了这个，但这会将profileContainer中的所有内容放在同一行上。我还有其他的元素，我想保留它们自己的路线。我更新了我的JSFIDLE以反映这一点。@Mike更新了我的答案。。。相同的属性，另一个CSS规则Hi，我在中添加了此属性，但这会将profileContainer中的所有内容放在同一行上。我还有其他的元素，我想保留它们自己的路线。我更新了我的JSFIDLE以反映这一点。@Mike更新了我的答案。。。相同的属性，另一个CSS规则