使用浮动图像时，HTML列表未垂直对齐

Question

我有一个包含标题，文本和图像的列表，有时，当文本不足时，我的列表开始破裂。列表开始嵌套。

<ul>
   <li><img style="float:left"><h3>title</h3> ... some text here</li>
   <li><img style="float:left"><h3>title</h3> ... some text here</li>
   <li><img style="float:left"><h3>title</h3> ... some text here</li>
</ul>

我这里有一个例子：

img {

  float: left;

  margin-right: 0.1em;

}


<ul>

  <li>

    <h3>photo</h3>

    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo

  </li>

  <li>

    <h3>photo</h3>

    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo

  </li>

  <li>

    <h3>photo</h3>

    <img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" />some text next to the photo

  </li>

</ul>

解决此问题的最佳方法是什么？

Answer 1

您缺少的部分是清除floats。用这个：

li:after {
    content: '';
    display: block;
    clear: both;
}

现在您将删除“嵌套”。

请注意，在使用浮动容器时，应始终将clear 它们放置在紧随其后的下一个容器之前，从而在调用它时创建新的 块格式化上下文
。否则，您将看到不可预测的行为。

修改后的演示如下：

img {

    float: left;

    margin-right: 0.1em;

}

li:after {

    content: '';

    display: block;

    clear: both;

}


<ul>

<li>

<h3>photo</h3>

<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo

</li>

<li>

<h3>photo</h3>

<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo

</li>

<li>

<h3>photo</h3>

<img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG"  /> some text next to the photo

</li>

</ul>