[英]How to vertically align the elements in two divs?
<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>
I have two divs. 我有两个div。 One div contains <label>
elements and another div contains <input>
elements. 一个div包含<label>
元素,另一个div包含<input>
元素。 The two divs are aligned horizontally. 两个div是水平对齐的。 I need to align the labels and input elements vertically so that each label has it's input underneath. 我需要垂直对齐标签和输入元素,以便每个标签都在下方输入。
I may achieve the above requirement by putting the <label>
and <input>
elements by placing them in <table>
rows/columns. 我可以通过将<label>
和<input>
元素放在<table>
行/列中来实现上述要求。 But I require them to use <div>
. 但我要求他们使用<div>
。
Could someone help me out on this ? 有人可以帮我解决这个问题吗?
Short answer , try this CSS 简短的回答 ,试试这个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; }
Long answer , to make the exact look you pictured in your question, use HTML5 placeholder attribute and CSS3 border-radius: 答案很长 ,为了使您在问题中看到的确切外观,使用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>
To finetune CSS3 effects, see css3generator 要微调 CSS3效果,请参阅css3generator
To get the divs on same row with inputs below them, use below css 要在同一行上使用下面的输入获取div,请使用下面的css
#div1 label { display: inline-block; }
#div1 label, #div2 input { width: 100px; }
Check Demo here http://jsfiddle.net/2wdUT/ 在这里查看演示http://jsfiddle.net/2wdUT/
Without css you can achieve it by using such an HTML structure - 没有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.