javascript - 如何垂直对齐两个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