CSS разрывы между ссылками на изображения без причины

Question

Последние несколько часов я пытался отсортировать эту горизонтальную навигацию, но ничего не работает. Я пробовал таблицы стилей reset.css, * {padding: 0; margin: 0) и т. д., и у меня все еще есть промежутки между ссылками на мои изображения.

Видите ли, навигация состоит из неупорядоченного списка ссылок на изображения, отображаемых в строке, но между каждым изображением, слева, справа, сверху и снизу, есть пробелы, и я не понимаю, почему. Это одинаково во всех браузерах.

Вот ссылка на страницу и источник: Beansheaf Temporary

Ссылка на css: http://pentathlongb -yorkshire.co.uk / tomsmith / Beansheaf / styles / fund2.css

Остальная часть сайта, очевидно, еще не закончена, сейчас меня беспокоит только навигация.

Answer 1

Чтобы избежать смещения навигации li s, у вас есть по крайней мере две опции для удаления пробелов между встроенными элементами.

<ul> 
  <li><a href="#"><img src="../hotel.jpg" /></a></li 
  ><li><a href="#"><img src="../foodDrink.jpg" /></a></li
  ><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li>
</ul>

Обратите внимание, что закрывающий тег </li> закрывается на следующей строке (кроме последней), что является допустимым и поддерживает читабельность (по крайней мере, для меня).

Другой вариант немного сложнее

<ul> 
  <li><a href="#"><img src="../hotel.jpg" /></a></li><!-- 
  --><li><a href="#"><img src="../foodDrink.jpg" /></a></li><!--
  --><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li>
</ul>

И просто использует html комментарии <!-- ... -->, чтобы закомментировать пробелы, которые в противном случае были бы свернуты в один пробел.

Хотелось бы, чтобы был какой-то способ указать (например):

ul li img {whitespace: none-between; }

Answer 2

Другой подход, избегающий использования float, состоит в том, чтобы установить размер шрифта на контейнере равным 0, а затем заново установить его для LI, например:

#mainNav
{    font-size: 0}

#mainNav li
{
    display: inline;
    list-style-type: none;
    font-size: 1em
}

Answer 3

зазор под ссылками к изображениям связан с тем, что по умолчанию изображение выровнено по базовой текстовой строке, его можно решить, просто объявив

li img {
    vertical-align:bottom;
}

волшебство! * * 1004

Answer 4

Это потому, что новая строка в документе HTML будет интерпретироваться как пробел в печатном содержимом. Поскольку все ваши элементы 'li' находятся на новых строках, между ними добавляется пробел. Убедитесь, что вы отображаете их как блочные элементы и перемещаете их влево, чтобы они работали равномерно.

Answer 5

Добавить

#mainNav li { 
  float:left;
}

на ваш CSS.

Answer 6

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

Поскольку вы отображаете их встроенными, пробелы в HTML будут действовать так, как если бы они были пробелами во встроенном тексте, и при рендеринге будет оставляться пробел.

Answer 7

если вы используете xslt для показа этих элементов, вы должны сделать следующее:

<xsl:template match=".//text()">  
    <xsl:value-of select="normalize-space(.)" />
</xsl:template>

Answer 8

Лучшее решение для этого прибывает из http://www.cssplay.co.uk/menus/centered.html. И цитирование:

Все, что нам нужно сделать, это заключить тег ul во внешний контейнер, ширина которого равна 100%, а переполнение установлено на скрытое.

Затем тег <ul> оформляется с относительной позицией и перемещается влево с левой позицией 50%.

Наконец, тег <li> также стилизован с относительной позицией, плавающей влево, но на этот раз с правой позицией 50%.

... и это, как говорится, все, что нужно.

Answer 9

Я использую атрибут line-height для тега li, чтобы исправить это.

ul li { line-height:0; }

Answer 10

Вы можете перемещать элементы списка, тогда пробел не мешает:

#mainNav li
{
 float: left;
 list-style-type: none;
}