CSS разрывает между ссылками изображения ни по какой причине
Я пытался отсортировать эту горизонтальную навигацию в течение прошлых нескольких часов теперь, и ничто не работает. Я попробовал reset.css таблицы стилей, * {дополнение: 0; поле: 0) и т.д. и у меня все еще есть промежуток разрывов мои ссылки изображения.
Вы видите, навигация составлена из незаказанного списка ссылок изображения, отображенных встроенный, но существуют разрывы, промежуточные каждое изображение, оставленное, право, вершина и нижняя часть, и я не вижу почему. Это - то же во всех браузерах.
Вот ссылка на страницу, и так источник: Временный Beansheaf
Ссылка на CSS: http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css
Остальная часть сайта, очевидно, все еще не сделана, это - просто навигация, по поводу которой я волнуюсь прямо сейчас.
6 ответов
Чтобы избежать перемещения навигационных 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>
Обратите внимание, что закрывающий тег закрывается в следующей строке (кроме последней), что является допустимым и поддерживает читаемость (по крайней мере, для меня).
Другой вариант немного запутан
<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; }
Попробуйте удалить все пробелы и разрывы строк между элементами li .
Поскольку вы показываете их встроенными, пробелы в HTML будут действовать так, как если бы они были пробелами во встроенном тексте, и оставляли пробелы при рендеринге.
Это потому, что новая строка в документе HTML будет интерпретироваться как пробел в печатном содержимом. Поскольку все ваши элементы li находятся на новых строках, между ними добавляется пробел. Убедитесь, что вы отображаете их как блочные элементы и смещаете их влево, чтобы они равномерно работали вместе.
Вы можете перемещать элементы списка, тогда пробелы не будут мешать:
#mainNav li
{
float: left;
list-style-type: none;
}
Другой подход, позволяющий избежать поплавков, состоит в том, чтобы установить размер шрифта в контейнере на 0, а затем повторно установить его для LI, например это:
#mainNav
{ font-size: 0}
#mainNav li
{
display: inline;
list-style-type: none;
font-size: 1em
}