Javascript 将div内的div与标签对齐？

我有下面的html代码

HTML 这里除了标签外，一切正常。如何将标签和div水平对齐为一条直线

谢谢

检查

我所做的是：

将标签和div放入带有class

outerWrap

的外部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;
}

---

希望能有帮助。

你给了80%的外部宽度，给了40%的内部左、右divWidth属性仅表示内容宽度。因此，如果将40%的比例都给予两者，那么它们的边界就会发生冲突，而且两者都不会正确。在使用float时，您需要稍微减小1的宽度。您需要使用以下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; 
 }

小提琴：

在以下位置尝试此：演示：

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

---

您希望如何对齐它…？？？=><代码>s用于表单控件，而不是表单控件集。将

与

一起使用。然后为每个复选框添加一个

。

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

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

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