<li>标签内的图片</li>

Question

<li>标签内的图片</li>

13

我有一个问题，涉及到 <li> 标签内的浮动元素。

我有以下标记：

<li>
<img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg" style="float:left">
<p>2013 Toyota Tacoma</p>
<p>Price : 450000$</p>
<p>Year : 2013</p>
<p><a href="/item/index/63">more</a></p>            
</li>

在Firefox和IE中一切正常，但在Chrome中，列表项目的编号会浮动到图像旁边。如何解决？谢谢。

- MaxD

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1386320 · Accepted Answer

我会这样重写你的例子：

<li>
    <div style="float: left;">
        <img src="concept-truck.jpg" alt="2013 Toyota Tacoma" id="itemImg">
    </div>
    <div style="float: left;">
        <p>2013 Toyota Tacoma</p>
        <p>Price : 450000$</p>
        <p>Year : 2013</p>
        <p><a href="/item/index/63">more</a></p>
    </div>
    <div style="float: none; clear: both;"></div>
</li>

这是使用内联样式CSS属性编写的，我通常倾向于避免使用它们，但像您的示例一样，我也将其编写为内联样式。