[英]Aligning div inside a div with Label?
I have below html code. 我有下面的HTML代码。
<label for="payment" class="headerAtt">Pay:</label>
<div class="chckValueWrap">
<div class="left">
<input type="checkbox" name="chk_group" value="value1" />Visa<br />
<input type="checkbox" name="chk_group" value="value2" />Master Card <br />
<input type="checkbox" name="chk_group" value="value3" />American Express<br />
<input type="checkbox" name="chk_group" value="value3" />Care Credit<br />
<input type="checkbox" name="chk_group" value="value1" />Discover</div>
<div class="right"><input type="checkbox" name="chk_group" value="value2" />Cash ONLY<br />
<input type="checkbox" name="chk_group" value="value3" />Personal Check<br />
<input type="checkbox" name="chk_group" value="value3" />PayPal <br />
<input type="checkbox" name="chk_group" value="value3" />No Cash Accepted<br />
<input type="checkbox" name="chk_group" value="value3" />Others
</div>
</div>
CSS: CSS:
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
.chckValueWrap{
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
}
.left{
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
Here everything is working fine except the label. 在这里,除了标签外,其他所有东西都工作正常。 how can i align align label and div horizontally as a single Line? 如何将标签和div水平对齐为一条直线?
Thanks! 谢谢!
Try changing margin of .chckValueWrap to -23px 0 0 42px;
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
.chckValueWrap{
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: -23px 0 0 42px;
padding: 1%;
height: 100px;
}
.left{
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
What I did is: 我所做的是:
Put the label and div inside an outer div with class outerWrap
. 使用class outerWrap
将标签和div放入外部div中。 And gave that div padding. 并给div填充。
Removed padding from chckValueWrap
class css. 从chckValueWrap
类css中删除了填充。
.outerWrap {
background-color: #FFFFFF;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
}
.chckValueWrap {
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
height: 100px;
}
Hope it helps. 希望能帮助到你。
You are giving 80% to the outer width and giving 40% each to right and left div inside it. 您要给外部宽度提供80%的空间,并向其内部的左右div分别提供40%的空间。 Width attribute represents the content width only. Width属性仅表示内容宽度。 So giving 40% to both will collide their border and both will not come correct. 因此,将两者都赋予40%会冲突其边界,并且两者都不正确。 You need to slightly decrease width of one while playing with float.You need make it work with following CSS changes: 在使用float时,您需要稍微减小宽度之一。需要通过以下CSS更改来使其工作:
.headerAtt{
padding-right: 50px;
padding-bottom: 10px;
min-width: 250px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
float:left;
}
.left{
width: 39%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
Fiddle: http://jsfiddle.net/9E4q7/4/ 小提琴: http : //jsfiddle.net/9E4q7/4/
Try this: Demo at: http://jsfiddle.net/7EPRJ/2/ 试试这个:演示位于: http : //jsfiddle.net/7EPRJ/2/
Your HTML remain the same. 您的HTML保持不变。 Just some tweaks to the css Your label width may be the issue. 只是对CSS进行了一些调整您的标签宽度可能是问题。
.headerAtt {
padding-right: 5px;
padding-bottom: 10px;
min-width: 20px;
display: inline-block;
color: #999999;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
float:left;
}
.chckValueWrap {
background-color: #FFFFFF;
border: 1px solid #C0C0C0;
padding-bottom: 10px;
font-size: 1.13em;
width: 80%;
margin: auto;
padding: 1%;
height: 100px;
float:left;
overflow:hidden;
}
.left {
width: 40%;
height: 100px;
float: left;
}
.right {
width: 40%;
height: 100px;
float: right;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.