Как вертикально выровнять элементы в двух div?

Question

<div id="div1"> 

    <label class="someClass1">Price 1</label> 
    <label class="someClass1">Price 2</label> 
    <label class="someClass1">Price 3</label> 
    <label class="someClass1">Price 4</label> 
</div> 
<div id="div2"> 
    <input type="text" class="someClass2"/> 
    <input type="text" class="someClass2"/> 
    <input type="text" class="someClass2"/> 
    <input type="text" class="someClass2"/> 
</div> 

У меня есть две дивы. Один div содержит <label> элементов, а другой div содержит <input> элементов. Два divs выровнены по горизонтали. Мне нужно выровнять метки и элементы ввода по вертикали, чтобы каждая метка имела вход под ним.

Я могу достичь вышеуказанного требования, поставив <label> и <input> элементов, поместив их в <table> строк/столбцов. Но я требую, чтобы они использовали <div>.

Может ли кто-нибудь помочь мне в этом?

Answer 1

Короткий ответ, попробуйте этот CSS

#div1 label.someClass1 { display: inline-block; margin: 0 5px; } 
#div1 label.someClass1, #div2 input.someClass2 { width: 100px; } 
#div2 input.someClass2 { margin: 0 0 0 10px; } 

---

Длинный ответ, чтобы сделать точный взгляд вы на фото в вашем вопросе, использовать HTML5 атрибут заполнитель и CSS3 границы радиуса:

#div1 label { 
    display: inline-block; 
    font-weight: bold; 
    margin: 0 5px; 
} 
#div1 label, #div2 input { 
    width: 100px; 
} 
#div2 input { 
    border-radius: 5px; -webkit-border-radius: 5px; 
    border-width: 1px; 
    padding: 2px; 
    margin: 0 0 0 10px; 
} 

.

<div id="div1"> 
    <label>Price 1</label> 
    <label>Price 2</label> 
    <label>Price 3</label> 
    <label>Price 4</label> 
</div> 
<div id="div2"> 
    <input type="text" placeholder="Price"/> 
    <input type="text" placeholder="Price"/> 
    <input type="text" placeholder="Price"/> 
    <input type="text" placeholder="Price"/> 
</div> 

Чтобы точно настроить CSS3 эффекты, см css3generator

Answer 2

Чтобы получить дивы на одном ряду с входами под ними, используйте ниже CSS

#div1 label { display: inline-block; } 
#div1 label, #div2 input { width: 100px; } 

Check Demo здесь http://jsfiddle.net/2wdUT/

Answer 3

Без CSS вы можете достигнуть этого, используя такую ​​HTML-структуру -

<div id="div1"> 
     <label class="someClass1">Price 1</label> 
     <div><input type="text" class="someClass2"/></div> 
    </div> 
    <div id="div2"> 
     <label class="someClass1">Price 2</label> 
     <div><input type="text" class="someClass2"/></div> 
    </div> 
    <div id="div3"> 
     <label class="someClass1">Price 3</label> 
     <div><input type="text" class="someClass2"/></div> 
    </div> 
    <div id="div4"> 
     <label class="someClass1">Price 4</label> 
     <div><input type="text" class="someClass2"/></div>  
    </div>