使用浮动图像时，HTML列表不垂直对齐 [英] HTML List isn't vertically aligned when using floating images

问题描述

我有一个包含标题，文本和图片的列表，有时，当没有足够的文本时，我的列表开始破坏，即。该列表开始嵌套本身。

 < ul> 
< li>< img style =float：left>< h3> title< / h3> ...这里有一些文字< / li> 
< li>< img style =float：left>< h3> title< / h3> ...这里有一些文字< / li> 
< li>< img style =float：left>< h3> title< / h3> ...这里有一些文字< / li> 
< / ul> 
  

我有一个例子：

http://jsfiddle.net/2z6Zn/246/

  img {float：left; margin-right：0.1em;}  

 < ul& < li> < h3>照片< / h3> < img src =http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG/>照片旁边的一些文字< / li> < li> < h3>照片< / h3> < img src =http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG/>照片旁边的一些文字< / li> < li> < h3>照片< / h3> < img src =http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG/>照片旁边的一些文字< / li>< / ul>  

你缺少的部分是清除 float s。使用：

  li：{
 content：''; 
 display：block; 
 clear：both; 
} 
  

现在您将删除嵌套。

请注意，使用浮动容器时，应始终清除
从而在调用时创建新的块
格式化上下文。否则您将看到
不可预测的行为。

下面的修改演示：

img {float：left; margin-right：0.1em;} li：after {content：'';显示：block; clear：both;}

 < ul>< li> ;< h3>照片< / h3>< img src =http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG/> ;照片旁边的一些文字< / li>< li>< h3>照片< / h3>< img src =http://commons.cathopedia.org/w/images/commons/thumb/f/fe /Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG/>照片旁边的一些文字< / li>< li>< h3>照片< / h3>< img src =http://commons.cathopedia.org/w/images/commons/thumb/f/fe /Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG/> < / ul>  

旁边的一些文字

I have a list with titles, text and images, and sometimes, when there is not enough text, my lists start breaking, ie. the list starts nesting itself.

<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>

I have an example here:

http://jsfiddle.net/2z6Zn/246/

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>

What's the best way to fix this?

解决方案

The part you are missing is to clear the floats. Use this:

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

and now you will have removed the "nesting".

Note that while using floating containers, you should always clear them before the next container that follows thereby creating a fresh block formatting context as it is called. Otherwise you will see unpredictable behavior.

Revised demo below:

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>

这篇关于使用浮动图像时，HTML列表不垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！