Having trobule zwei DIVs immer vertikal ausrichten

Question

Ich habe zwei DIVs

<div class=“address”> 
    <div class="field"><input placeholder="City" class="textField" type="text" name="user[address][city]" id="user_address_city"></div> 

    <div class="select"><select class="selectField selectMenu form-control select-hidden" name="user[address][state]" id="user_address_state"><option value="">Select State</option> 
    <option value="AL">Alabama</option> 
    <option value="WY">Wyoming</option></select><div class="select-styled">Select State</div><ul class="select-options"><li rel="">Select State</li><li rel="AL">Alabama</li><li rel="WY">Wyoming</li></ul></div> 
</div> 

Das Problem, das ich habe ist DIVs beide auf der gleichen vertikalen Ebene ausgerichtet werden. Pro Fiddle - https://jsfiddle.net/7e0jthv1/ wird das Auswahlmenü an einer höheren vertikalen Position ausgerichtet als das andere Textfeld. Dies ist der Stil, den ich für meine Eingangselement haben

input { 
    font-size: 16px; 
    line-height: 18px; 
    box-sizing: border-box; 
    font-family: inherit; 
    padding: 0.4rem 0; 
    text-indent: 0.8rem; 
    border: none; 
    outline: none; 
    margin: 0; 
    background-color: transparent; 
} 

und das ist der Stil für das DIV das Auswahlmenü mit ...

.select { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    font-size: 16px; 
    color: #fff; 
    width: 220px; 
    height: 40px; 
} 

ich kann nicht herausfinden, warum die Dinge richten nicht an die Spitze.

Answer 1

Sie müssen vertical-align zu Ihren .select und .field Behältern hinzufügen.

Sie können etwas tun und es werden die Elemente in einer Reihe aufstellen richtig machen:

.select, .field {vertical-align:top;} 

https://jsfiddle.net/p40jeq9L/

EDIT: Dies ist auf die Tatsache zurückzuführen, dass die Elemente sind inline-block. Die akzeptierte Antwort in diesem Post erklärt die Gründe, warum ziemlich gut: My inline-block elements are not lining up properly

Answer 2

Fügen Sie einfach die Eigenschaft CSS width.

So fügen width:100% zu divsclass="select" und class="field". jsfiddle

Answer 3

Sie können es mit display: table, table-cell:

HTML:

<div class="profileField address"> 
    <label for="user_address_address">Hometown</label><br> 
    <div class="fields-container"> 
    <div class="field"><input placeholder="City" class="textField" type="text" name="user[address][city]" id="user_address_city"></div> 
    <div class="select"> 
<select class="selectField selectMenu form-control select-hidden" name="user[address][state]" id="user_address_state"> 
<option value="">Select State</option> 

<option value="AL">Alabama</option> 
<option value="AK">Alaska</option> 
<option value="AZ">Arizona</option> 
<option value="AR">Arkansas</option> 
<option value="CA">California</option> 
<option value="CO">Colorado</option> 
<option value="CT">Connecticut</option> 
<option value="DE">Delaware</option> 
<option value="DC">District of Columbia</option> 
... 
</select> 
<div class="select-styled">Select State</div><ul class="select-options"><li rel="">Select State</li><li rel="AL">Alabama</li><li rel="AK">Alaska</li><li rel="AZ">Arizona</li><li rel="AR">Arkansas</li><li rel="CA">California</li><li rel="CO">Colorado</li><li rel="CT">Connecticut</li><li rel="DE">Delaware</li><li rel="DC">District of Columbia</li><li rel="FL">Florida</li><li rel="GA">Georgia</li><li rel="HI">Hawaii</li><li rel="ID">Idaho</li><li rel="IL">Illinois</li><li rel="IN">Indiana</li><li rel="IA">Iowa</li><li rel="KS">Kansas</li><li rel="KY">Kentucky</li><li rel="LA">Louisiana</li><li rel="ME">Maine</li><li rel="MD">Maryland</li><li rel="MA">Massachusetts</li><li rel="MI">Michigan</li><li rel="MN">Minnesota</li><li rel="MS">Mississippi</li><li rel="MO">Missouri</li><li rel="MT">Montana</li><li rel="NE">Nebraska</li><li rel="NV">Nevada</li><li rel="NH">New Hampshire</li><li rel="NJ">New Jersey</li><li rel="NM">New Mexico</li><li rel="NY">New York</li><li rel="NC">North Carolina</li><li rel="ND">North Dakota</li><li rel="OH">Ohio</li><li rel="OK">Oklahoma</li><li rel="OR">Oregon</li><li rel="PA">Pennsylvania</li><li rel="PR">Puerto Rico</li><li rel="RI">Rhode Island</li><li rel="SC">South Carolina</li><li rel="SD">South Dakota</li><li rel="TN">Tennessee</li><li rel="TX">Texas</li><li rel="UT">Utah</li><li rel="VT">Vermont</li><li rel="VA">Virginia</li><li rel="WA">Washington</li><li rel="WV">West Virginia</li><li rel="WI">Wisconsin</li><li rel="WY">Wyoming</li></ul></div> 
    </div> 
    </div> 

CSS:

@import url("http://fonts.googleapis.com/css?family=Lato"); 

.profileField { 
    padding: 10px; 
    font-family: 'Oxygen', sans-serif; 
    font-weight: 300; 
    font-size: 20px; 
} 

.profileField label { 
     margin-bottom: 10px; 
    float: left; 
    width: 100%; 
} 

.field { 
    border: 1px solid rgba(74, 74, 76, 0.5) !important; 
     float: none; 
    display: table-cell; 
    margin: 15px; 
} 

input { 
    font-size: 16px; 
    line-height: 18px; 
    box-sizing: border-box; 
    font-family: inherit; 
    padding: 0.4rem 0; 
    text-indent: 0.8rem; 
    border: none; 
    outline: none; 
    margin: 0; 
    background-color: transparent; 
} 

.address { 
    display: inline-block; 
} 


.select-hidden { 
    display: none; 
    visibility: hidden; 
    padding-right: 10px; 
} 

.select { 
    cursor: pointer; 
    display: inline-block; 
    position: relative; 
    font-size: 16px; 
    color: #fff; 
    width: 220px; 
    height: 40px; 
    display: table-cell; 
} 

.select-styled { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 15px; 
    background-color: #c0392b; 
    padding: 8px 15px; 
    -webkit-transition: all 0.2s ease-in; 
    transition: all 0.2s ease-in; 
} 

.select-styled:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    border: 7px solid transparent; 
    border-color: #fff transparent transparent transparent; 
    position: absolute; 
    top: 16px; 
    right: 10px; 
} 

.select-styled:hover { 
    background-color: #b83729; 
} 

.select-styled:active, .select-styled.active { 
    background-color: #ab3326; 
} 

.select-styled:active:after, .select-styled.active:after { 
    top: 0px; 
    border-color: transparent transparent #fff transparent; 
} 

.select-options { 
    display: none; 
    position: absolute; 
    top: 100%; 
    right: 0; 
    left: 0; 
    z-index: 999; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    background-color: #ab3326; 
} 

.select-options li { 
    margin: 0; 
    padding: 12px 0; 
    text-indent: 15px; 
    border-top: 1px solid #962d22; 
    -webkit-transition: all 0.15s ease-in; 
    transition: all 0.15s ease-in; 
} 

.select-options li:hover { 
    color: #c0392b; 
    background: #fff; 
} 

.select-options li[rel="hide"] { 
    display: none; 
} 

.fields-container { 
display: table; 
} 

FIDDLE