添加了 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>

这里是样式，都包含“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-块 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

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

Added display:inline-block, but my HTML elements are still spilling over into a different line

html

css

inline

center

display