我只是不知道为什么div元素内有多余的空间(红线)。
左元素完全相同,但是没有这个问题。
代码:
<div class="detailsSection2">
<div class="profile-info-row">
<div class="profile-info-name-short"><br><br> 11111111111:
</div>
<div class="profile-info-value" style="border:none;"><br><br>
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
1111111111
</span>
</div>
<div class="profile-info-name-short"><br><br> 11111111111:
</div>
<div class="profile-info-value" style="border:none;"><br><br>
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
**
</span>
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name-short">ABC: </div>
<div class="profile-info-value" style="border:none;">
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
**
</span>
</div>
<div class="profile-info-row">
<div class="profile-info-name-short">
1111111 111:
</div>
<div class="profile-info-value" style="border:none;">
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
Enabled
</span>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
因为您的html中有多余的一行:
.profile-info-row {
display: table-row;
}
.profile-info-name-short {
text-align: left;
padding: 6px 10px 6px 4px;
font-weight: 600;
color: #485866;
background-color: transparent;
display: table-cell;
width: 20px;
vertical-align: middle;
}
.profile-info-value {
display: table-cell;
padding: 6px 4px 6px 6px;
/* border-top: 1px dotted #D5E4F1; */
}
.profile-info-name-short {
text-align: left;
padding: 6px 10px 6px 4px;
font-weight: 600;
color: #485866;
background-color: transparent;
display: table-cell;
width: 20px;
vertical-align: middle;
}
<div class="detailsSection2">
<div class="profile-info-row">
<div class="profile-info-name-short"><br><br> 11111111111:
</div>
<div class="profile-info-value" style="border:none;"><br><br>
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
1111111111
</span>
</div>
<div class="profile-info-name-short"><br><br> 11111111111:
</div>
<div class="profile-info-value" style="border:none;"><br><br>
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
**
</span>
</div>
</div>
<div class="profile-info-row">
<div class="profile-info-name-short">ABC: </div>
<div class="profile-info-value" style="border:none;">
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
**
</span>
</div>
<!-- REMOVE THIS <div class="profile-info-row"> -->
<div class="profile-info-name-short">
1111111 111:
</div>
<div class="profile-info-value" style="border:none;">
<span style="border-bottom:1px dotted #D5E4F1; padding-bottom: 5px;">
Enabled
</span>
</div>
</div>
</div>
<!-- DELETE THIS TOO </div> -->
答案 1 :(得分:0)