如何在两个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包含元素，另一个div包含元素。这两个div水平对齐。我需要将标签和输入元素垂直对齐，使每个标签下面有它的输入。

我可以通过将和元素放置在中的行/列中来实现上述要求。但是我需要它们使用

。

能否有人帮我解决这个问题？

- Manoj Shrestha

---

这两个 div 的宽度是否保证相同？ - Passerby

@路人甲：我没有为div定义固定宽度。我应该吗？ - Manoj Shrestha

那么，在label和input上都指定固定宽度是否可以，就像Jan的回答一样？ - Passerby

是的，我们可以在输入和标签元素上设置固定宽度。 - Manoj Shrestha

这个可以吗：http://jsfiddle.net/2wdUT/1/？（也在Jan的回答评论中） - Passerby

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

- Jan Turoň

---

垂直对齐仍然不完美。 - Manoj Shrestha

Answer 2

要让div与其下方的输入框在同一行上，可以使用以下CSS。

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

请在这里查看演示http://jsfiddle.net/2wdUT/

- harishannam

---

垂直对齐仍然不完美。 - Manoj Shrestha

@JanTuroň 我认为这可能是一个诚意的努力，提供了一个比你更好的答案。通常这是一个有效的回答方式。对你的回答进行评论也是适当的。请参见我在harishannam下面的评论。 - Andrew Barber

@harishannam，请注意不要抄袭其他人的答案。我知道你只做了一点点修改，这是发布自己的答案的有效理由。当你这样做时，通常最好在答案中包含一个注释，说明你正在使用另一个用户的信息作为基础。 - Andrew Barber

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>

- SrikanthManian

---

我不能这样做。我需要动态插入标签和输入元素。我之前只有水平对齐的两个div。 - Manoj Shrestha

这是垂直排列，而用户想要水平排列。 - GeekyCoder