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>

我这里有一个例子：

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>

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

Answer 1

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

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

现在您将删除 "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.

修改后的演示如下：

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>

Answer 2

删除您在 jSfiddle 中应用的 CSS 即

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

只需添加以下 CSS

ul{
display:block;
clear:both;
}

Answer 3

 /* This will make every element inside Li align in a line */

 li * {
    display: inline-block;
 }
/* have specifically gave h3 element block property so that it can be in a separate line and serve as a heading */
  li h3 {
    display: block;
  }

工作 fiddle - http://jsfiddle.net/2z6Zn/247/

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

HTML List isn't vertically aligned when using floating images

html

css

image

list

css-float