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

除标签外，一切正常。如何将 align label 和 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; 
 }