如何将我的 HTML 元素保持在父 DIV 内的同一水平面上？答案

【问题标题】：How do I keep my HTML elements on the same horizontal plane inside a parent DIV?如何将我的 HTML 元素保持在父 DIV 内的同一水平面上？
【发布时间】：2016-12-06 16:24:16
【问题描述】：

假设有足够的屏幕空间，我希望将以下 HTML 元素保持在同一水平面上......

  <div class="profileField">
    Birthday<br> 
    <div class="select"><select id="user_dob_2i" name="user[dob(2i)]" class="select-hidden">
<option value="">Select Month</option>
<option value="1">January</option>
…
<option value="12">December</option>
</select><div class="select-styled">Select Month</div><ul class="select-options" style="display: none;"><li rel="">Select Month</li>…<li rel="12">December</li></ul></div>
<div class="select"><select id="user_dob_3i" name="user[dob(3i)]" class="select-hidden">
<option value="">Select Day</option>
<option value="1">1</option>
…
<option value="31">31</option>
</select><div class="select-styled">Select Day</div><ul class="select-options" style="display: none;"><li rel="">Select Day</li><li rel="1">1</li>…<li rel="31">31</li></ul></div>
<div class="select"><select id="user_dob_1i" name="user[dob(1i)]" class="select-hidden">
<option value="">Select Year</option>
<option value="1900">1900</option>
…
 <option value="2021">2021</option>
</select><div class="select-styled">Select Year</div><ul class="select-options" style="display: none;"><li rel="">Select Year</li><li rel="1900">1900</li>…<li rel="2021">2021</li></ul></div>
  </div>

所以我在 DIV 中添加了以下 CSS 来实现这一点

.profileField {
        display: inline-block;
}

一切正常，直到我将上面的 DIV 放在另一个具有以下样式的 DIV 中

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

现在 HTML 元素会换行到下一行，即使有足够的屏幕空间将它们保留在当前行。这是说明这一点的 JS Fiddle - https://jsfiddle.net/63hchayL/ 。如何将元素保持在同一平面上并保持父 div 居中？

【问题讨论】：

说明这应该是什么样子会很有用
如果我有 HTML 和 CSS，我就不会问这个问题了！
一张照片就是我们所需要的！
啊，明白了。让我做点什么。

标签： html css center inline display

【解决方案1】：

这是因为 div 默认显示为block。要解决您的问题，请将 display: inline-block 添加到 div 的包含选择中。

将以下代码添加到您的 CSS。

.profileField .select{
  display: inline-block;
}

Updated Fiddle.

【讨论】：