HTML 标签正确对齐，但似乎仍然乱七八糟

Question

我所有的 HTML 标签都正确对齐，但是当我将它的代码悬停在检查元素中时，它看起来很乱，但是，输出没问题。

如上图所示。我的第一行，即“名称”在 div .b1 内，但是当我在开发人员工具中悬停该 div 时，它不会突出显示我的第一行。每一行的问题都是一样的 .b2, .b3, .b4....

这是我的 HTML

<div class="invoice-details">

    <div class="blank b1">
        <strong>Name</strong>
    <div><?php if(!empty($student_full_name)) echo $student_full_name; ?></div>
    </div>
    <div class="blank b2">
        <strong>Father Name</strong>
        <div><?php if(!empty($father_full_name)) echo $father_full_name; ?> </div>
    </div>
    <div class="blank b3">
        <div class="sb1">
            <strong>Mob No.</strong>
            <div><?php if(!empty($sphone_f)) echo $sphone_f; ?></div>
        </div>
        <div class="sb2">
            <strong>Reg. No.</strong>
            <div><?php if(!empty($regno)) echo $regno; ?></div>
        </div>
    </div>
    <div class="blank b4">
        <div class="sb1">
            <strong>From Month</strong>
            <div></div>
        </div>
        <div class="sb2">
            <strong>To Month</strong>
            <div></div>
        </div>
    </div>
    <div class="blank b5">
        <div class="sb1">
            <strong>Session</strong>
            <div><?php if(!empty($session)) echo $session; ?></div>
        </div>
        <div class="sb2">
            <strong>Class/Section</strong>
            <div><?php if(!empty($class)) echo $class; ?></div>
        </div>
    </div>

    <div class="blank b6">
        <div class="sb1">
            <strong>Mode Of Payment</strong>
            <div></div>
        </div>
        <div class="sb2">
            <strong>Cheque/NEFT Number</strong>
            <div>N/A</div>
        </div>
    </div>

</div>

这是我的 CSS

 .blank div{
    border-bottom: 1px dotted #000;
    float: right;
    padding-left: 5px;
    height: 30px;
    padding-top: 10px;
    text-align: center;
}
.blank strong{
    float: left;
    height: 30px;
    padding-top: 10px;
}
.b1 strong{
    width: 5%;
}
.b1 div{
    width: 95%;
}

.b2 strong{
    width: 12%;
}
.b2 div{
    width: 88%;
}


.b3 .sb1, .b4 .sb1, .b5 .sb1{
    float: left;
    width: 50%;
    height: 30px;
    border: none;
    padding: 0;
    text-align: left;
}
.b3 .sb2, .b4 .sb2, .b5 .sb2{
    float: right;
    width: 49.5%;
    height: 30px;
    border: none;
    padding: 0;
    text-align: left;
}
.b3 .sb1 strong{
    width: 14%;
}
.b3 .sb1 div{
    width: 86%;
}
.b3 .sb2 strong{
    width: 14%;
}
.b3 .sb2 div{
    width: 86%;
}

.b4 .sb1 strong{
    width: 20%;
}
.b4 .sb1 div{
    width: 80%;
}
.b4 .sb2 strong{
    width: 18%;
}
.b4 .sb2 div{
    width: 82%;
}

.b5 .sb1 strong{
    width: 17%;
}
.b5 .sb1 div{
    width: 83%;
}
.b5 .sb2 strong{
    width: 25%;
}
.b5 .sb2 div{
    width: 75%;
}

.b5 .sb1, .b5 .sb2{
    margin-bottom: 20px;
}

Answer 1

Danny H 可能是对的。但也可能存在另一个问题。 .sb1 .sb2 等 .b1, .b2, .b3 等内部可能有 float:left 或 float:right 在它们上面。通常，内部具有 float 元素的元素不会占据任何位置，这就是为什么不会有任何高度的原因。

如果它是 float 的，这会阻止您的 .b1、.b2 等占用高度，那么您可以通过添加这些 css 来简单地解决这个问题:

    .b1:after, .b2:after, .b3:after, .b4:after, .b5:after{
        content: '';
        display: table;
        clear: both;
    }