Div元素比其内容宽

Question

我只是不知道为什么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&nbsp;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>

http://jsfiddle.net/fz14u0dh/

Answer 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&nbsp;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> -->

Answer 2

问题是您的div的行为类似于表行：

您的第三个顶部元素更长，因为它与下面的行单元格的宽度匹配。