XHTML Проблема с разрывом строки - PullRequest
Новая
       29

XHTML Проблема с разрывом строки

2 голосов
/ 18 ноября 2010

в основном у меня есть список ul 

<ul>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
    <li style="background-image:url(images/thumbs/spaceinvader.jpg);"><a href="#"></a></li>
</ul>

теперь стили для списка: 

li {
    display:inline-block;
    margin:5px 0 0 8px;
    width:73px;
    overflow:hidden;
}


li a {
    display:block;
    background:url(../images/gtborder.png);
    width:73px;
    height:55px;
}
li:hover {
    background-position:0px -55px;
}

Хорошо, теперь разрыв между каждым списком должен быть ровно 8px, но когдапросмотреть его в браузере ... его mroe, а затем 8px.Это из-за новой строки.

Если бы у меня были все теги li на одной строке, это было бы хорошо, но я действительно не хочу этого делать.Есть ли способ, которым я могу сохранить свой HTML как есть и просто отредактировать CSS, чтобы больше не было этого места?

Ответы [ 2 ]

1 голос
/ 18 ноября 2010

Ну, так как вы устанавливаете элементы списка равными inline-block, то пробел между этими элементами в вашей разметке (т.е. отступ) является причиной проблем. Поэтому два элемента списка разделяются пробелом и полем слева от каждого элемента списка.

Решение. Попробуйте создать элементы списка или избавиться от пробелов между тегами списка.

Удачи.

1 голос
/ 18 ноября 2010

Понял

Между тегами li есть пробел - я удалил его:

http://jsfiddle.net/j5yDd/1/

оригинальный ответ ::

У вас также есть верхнее поле 5px, поэтому пространство будет 13, вам нужно удалить верхнее поле 5px.

эр. Вы уверены, что это точный CSS? Как написано, у вас есть верхнее поле в 5 пикселей и левое поле в 8. Я не вижу никакого нижнего поля вообще.

http://jsfiddle.net/j5yDd/

...