Question

我的所有HTML标签都已正确对齐，但是当我将其代码悬停在inspect元素中时，它似乎搞砸了，但是输出没问题。

如上图所示。我的第一行，即＃34;姓名＆＃34;在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。一般来说，里面有浮动元素的元素不会占据任何地方，这就是为什么没有任何高度。

如果它是浮动的，阻止你的.b1, .b2等达到高度，那么你可以通过添加这些css来解决这个问题：

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

HTML标记已正确对齐，但似乎仍然搞砸了

1 个答案: