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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.