Wie behalte ich meine HTML-Elemente auf derselben horizontalen Ebene in einem übergeordneten DIV?

Question

Ich möchte die folgenden HTML-Elemente auf der gleichen horizontalen Ebene behalten, vorausgesetzt, es gibt genug Bildschirm-Immobilien ....

<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> 

So habe ich die folgende CSS DIV dies möglich

.profileField { 
     display: inline-block; 
} 

Alles funktioniert gut, bis ich die oben DIV in einem anderen DIV mit dem untenen Stil

#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%); 
} 

setzen zu machen Jetzt werden die HTML-Elemente in die nächste Zeile umgebrochen, obwohl genügend Bildschirmfläche vorhanden ist, um sie auf der aktuellen Zeile zu halten. Hier ist die JS Fiddle, die das veranschaulicht - https://jsfiddle.net/63hchayL/. Wie behalte ich die Elemente auf der gleichen Ebene und halte das Eltern-Div auch zentriert?

Answer 1

Dies liegt daran, dass Divs standardmäßig als block angezeigt werden. Um das Problem zu beheben, fügen Sie display: inline-block zu den divs hinzu, die auswählen.

Fügen Sie den folgenden Code zu Ihrem CSS hinzu.

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

Updated Fiddle.