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

Question

我想将以下 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>

所以我将以下 CSS 添加到 DIV 以实现此目的

.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 居中？

Answer 1

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

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

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

Updated Fiddle.

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

How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

html

css

inline

center

display