All geek questions in one place

Image inside the <li> tag

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

I have the 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 chronological order, the number of notes also floats. How to fix it? Thanks

+4
source share
1 answer

I would rewrite your example as follows:

 <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 using inline-style CSS attributes, which I usually try to avoid, but, like in your example, I wrote it the same way you did inline.

+10
source

Source: https://habr.com/ru/post/1494040/

More articles:


All Articles