水平线看起来不正确。是什么原因？

Question

我在每个li之后放置水平线。我想要做的是hr应与li（s）保持相同的距离。

这是我放入hr的css

.divider {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background:  #ccc;
}

这是一个li（s）

<li style="width:210px;padding:10px 0 10px 0" class="memberElement">
  <div class="MemberImageHolder" style="float:left">
    <a href="#">
      <img class="mediumMemberPicture" src="picture.php?action=display&amp;contentType=members&amp;id=20&amp;quality=medium" alt="" />
    </a>
  </div>
  <div class="memberDetails" style="float:right">
    <a href="#">Mert Metin<br></a>
    <span id="title">
      Administrator<br><br>
    </span>
    <span id="unit">
      <b>University of Ottawa</b>
      <br>
    </span>
  </div>
  <span class="divider"></span>
</li>

然而，这就是它的样子：

为什么会这样？

Answer 1

尝试在<span class="divider">元素之前清除浮点数。由于兄弟<div>元素是浮动的，因此在将元素放在它们下面之前，您需要清除浮动。

另请参阅：clearfix

此外，CSS content适用于::before和::after伪元素。我删除了它，因为它在这里没用。

.divider {
    ...
    clear: both;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.divider {
  display: block;
  height: 1px;
  width: 100%;
  background: #ccc;
  clear: both;
}

<ul>
  <li style="width:210px;padding:10px 0 10px 0" class="memberElement">
    <div class="MemberImageHolder" style="float:left">
      <a href="#">
        <img class="mediumMemberPicture" src="http://dummyimage.com/100x100/000/fff" alt="">
      </a>

    </div>
    <div class="memberDetails" style="float:right"><a href="#">Mert Metin<br></a><span id="title">Administrator<br><br></span><span id="unit"><b>University of Ottawa</b><br></span>

    </div><span class="divider"></span>

  </li>
  <li style="width:210px;padding:10px 0 10px 0" class="memberElement">
    <div class="MemberImageHolder" style="float:left">
      <a href="#">
        <img class="mediumMemberPicture" src="http://dummyimage.com/100x100/000/fff" alt="">
      </a>

    </div>
    <div class="memberDetails" style="float:right"><a href="#">Mert Metin<br></a><span id="title">Administrator<br><br></span><span id="unit"><b>University of Ottawa</b><br></span>

    </div><span class="divider"></span>

  </li>
</ul>

Answer 2

您可能想要添加after：

.divider:after {
    content: "";
    display: block;
    height: 1px;
    width: 100%;
    background:  #ccc;
}