如何垂直對齊兩個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。 一個div包含<label>元素，另一個div包含<input>元素。 兩個div是水平對齊的。 我需要垂直對齊標簽和輸入元素，以便每個標簽都在下方輸入。

我可以通過將<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 border-radius：

#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

要在同一行上使用下面的輸入獲取div，請使用下面的css

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

在這里查看演示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>