将div中的div与Label对齐？

Question

我有下面的HTML代码。

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：

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

在这里，除了标签外，其他所有东西都工作正常。 如何将标签和div水平对齐为一条直线？

谢谢！

Answer 1

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

Answer 2

检查一下

我所做的是：

使用class outerWrap将标签和div放入外部div中。 并给div填充。

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

希望能帮助到你。

Answer 3

您要给外部宽度提供80％的空间，并向其内部的左右div分别提供40％的空间。 Width属性仅表示内容宽度。 因此，将两者都赋予40％会冲突其边界，并且两者都不正确。 在使用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; 
 }

小提琴： http : //jsfiddle.net/9E4q7/4/

Answer 4

试试这个：演示位于： http : //jsfiddle.net/7EPRJ/2/

您的HTML保持不变。 只是对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;
}