Как плавать элементы в строках.

Question

Вот мой последний шанс решить эту «вероятно» проблему CSS.

Это страница проблемы. http://mentor.com.tr/?page_id=81

Сайт построен на WordPress. И сгенерированные сообщения отображаются в виде неупорядоченных списков.

    <ul class="lcp_catlist">
    <li>
    <li>
    <li>
    ...
    </ul>

Все <li> всплывают влево. Но, как вы увидите, в левом ряду один странный пробел. Это моя проблема. Как я могу это исправить? Я схожу с ума от этого.

Gap:

Answer 1

Вы можете указать явную высоту для элементов li

ul.lcp_catlist li {
    ...
    height: 240px;
}

Answer 2

Попробуйте удалить float: left и вместо этого использовать display: inline-block.

Примечание: Inline-block не поддерживается в IE6 / 7, но он будет работать так же, если вы примените «display: inline; zoom: 1» в таблице стилей только IE6 / 7.

Answer 3

Разрыв возникает, потому что высота изображения http://mentor.com.tr/wp-content/themes/hybrid/library/images/2011/07/Aycan.jpg на 1 пиксель меньше, чем у других. Измените стиль изображения с extrastyles.css следующим образом, чтобы устранить пробел:

ul.lcp_catlist img {
    float: left;
    height: 206px;
    margin-right: 5px;
    margin-top: -2px;
    width: auto;
}