Javascript 如何在两个div中垂直对齐元素？

价格1
价格2
价格3
价格4

我有两个div。一个div包含

元素，另一个div包含

元素。两个div水平对齐。我需要垂直对齐标签和输入元素，以便每个标签下面都有它的输入

我可以通过将

和

元素放置在

行/列中来实现上述要求。但我要求他们使用

---

有人能帮我一下吗？

简短回答，试试这个CSS

<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>

---

长答案，要使问题中的图片看起来准确，请使用HTML5占位符属性和CSS3边界半径：

#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; }

价格1
价格2
价格3
价格4

---

要微调CSS3效果，请参见

要获得同一行上的div及其下方的输入，请使用下方的css

<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>

---

检查这里的演示

如果没有css，您可以通过使用这样的HTML结构来实现它-

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

价格1
价格2
价格3
价格4

这两个

div

s是否保证具有相同的宽度？@路人：我没有定义div的固定宽度。我是否应该？？那么可以像Jan的回答那样在

标签

s和

输入

s上指定固定宽度？是的，我们可以在输入和标签元素上设置固定宽度。这可以接受吗：？（简的回答中也有这样的评论）我不能那样做。我需要动态插入标签和输入元素。我之前只知道两个div水平排列。这是垂直排列，OP需要水平排列。垂直排列仍然不完美。垂直排列仍然不完美。@JanTuroň我认为这可能是一个善意的努力来提供答案，改进你的答案。通常，这是一种有效的回答方式。对你的答案发表评论也是合适的。另请参见下面我对harishannam的评论。@harishannam一定要小心抄袭他人的答案。我知道你做了一个小的更正，这是一个发布你自己答案的正当理由。当你这样做的时候，在这些小的调整中，通常最好包括一个注释，说明你是从另一个用户的帖子中获取基本信息的。

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

    <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>