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

检查this

我做的是：

将标签和div放在带有outerWrap类的外部div中。然后给了div填充。

从chckValueWrap class 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％。宽度属性仅表示内容宽度。因此给予两者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;
}

使用Label将div内的div对齐？

HTML

4 个答案: