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小提琴，它说明了这一点 - https://jsfiddle.net/63hchayL/。如何将元素保持在同一平面上并保持父div居中？

Answer 1

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

将以下代码添加到CSS中。

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

Updated Fiddle

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

1 个答案: