Image inside <li> tag

综合编程 2018-12-06 阅读原文

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

CSS3 Recipes

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!

您可能感兴趣的

Height of with absolute positioning (in a Respons... I have a slideshow, of sorts, which is triggered using jQuery and cycles through images in a ul. The images are styled w...
重磅:8900 超级大标库下载EPS 8900图标库是一个庞大的集合,包括8900个图标-445个类别。 作为EPS保存的完全可编辑的矢量文件(用于图像编辑——使用Adobe Illustrator程序)。 在.eps 文件被扩展 准备好任何项...
Scrolling child element inside parent? I have a parent element with two children. One child is a dynamic ul where admins will add and remove menu links as they...
Get the selected value from the drop-down list in ... How to get the text of selected item from a drop down box element in html forms? (using python) How can I store the v...
Set the font size in the tag cloud based on occurr... I want to create a tag cloud based on tags I assign to products. The idea being the more occurances of the tag the bigge...