Html <li> 标签内的图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17921949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Image inside <li> tag
提问by MaxD
I have a question about floating elements inside of <li>tag.
我有一个关于<li>标签内浮动元素的问题。
I have following markup
我有以下标记
<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>
In FF, IE works fine, but in Chrome list numeration floats image too. How to fix it? Thanks
在 FF 中，IE 工作正常，但在 Chrome 列表编号中也会浮动图像。如何解决？谢谢
回答by
I would rewrite your example like this:
我会像这样重写你的例子：
<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>
This is written with inline-style CSS attributes, which I usually tend to avoid, but as in your example, I wrote it like you did - inline.
这是用内联样式的 CSS 属性编写的，我通常倾向于避免这种情况，但是在您的示例中，我像您一样编写了它 - 内联。
