综合编程

Image inside <li> tag

微信扫一扫,分享到朋友圈

Image inside <li> tag
0

I have a question about floating elements inside of <li>
tag.

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

Problem courtesy of: MaxD

Solution

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.

Solution courtesy of: user1386320

阅读原文...

微信扫一扫,分享到朋友圈

Image inside <li> tag
0
CSS3 Recipes

蘑菇街美国上市:腾讯为最大股东,红杉、高瓴、BAI、启明等“坐镇”

上一篇

h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Image inside <li> tag

长按储存图像,分享给朋友