Изображение внутри тега <li>

Question

У меня есть вопрос о плавающих элементах внутри <li> тег.

У меня есть следующая разметка

<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>

В FF IE работает нормально, но в нумерации списка Chrome изображение тоже плавает. Как это исправить? Спасибо

Answer 1

Я бы переписал ваш пример так:

<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>

Это написано с помощью CSS-атрибутов inline-стиля, которых я обычно стараюсь избегать, но, как и в вашем примере, я написал это так, как вы - inline.