Как удалить пространство между элементами списка

Как вам избавиться от пробелов между элементами списка? Я пытаюсь сделать так, чтобы изображения были рядом друг с другом. Даже если я установил стиль margins: 0;, они все еще разделены.

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>

Ответы

Ответ 1

Обновлено 1 сентября 2014 года

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

ul {
  display: flex;
}

Смотрите здесь JSFiddle.

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

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

Во-первых, чтобы ответить на ваш неявный вопрос о том, почему существует интервал, это там, потому что вы указали, что ваши LI должны отображаться как встроенные элементы.

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

Но иногда мы хотим, чтобы нетекстовые элементы были inline, чтобы использовать другие свойства этого стиля отображения. И это обычно включает в себя стремление к тому, чтобы наши элементы плотно прилегали друг к другу, в отличие от текста. И это, кажется, ваша проблема здесь.

Без дальнейших церемоний, вот все, что я знаю, чтобы избавиться от интервала:

Сохранение встроенных

(Не рекомендуется) Примените отрицательный запас к LI, чтобы переместить их.
```
li { margin: -4px; }
```

Обратите внимание, что вам нужно "угадать" размер пробела. Это не рекомендуется, потому что, как замечает Артур в комментариях ниже, пользователи могут изменять масштаб своего браузера, что, скорее всего, испортит рендеринг вашего кода. Кроме того, этот код требует слишком много догадок и вычислений. Существуют лучшие решения, которые работают при любых условиях.

Избавиться от пробелов
```
<li>One</li><li>Two</li>
```
Используйте комментарии, чтобы сделать пробельный комментарий JSFiddle
```
<li>One</li><li>Two</li>
```
Пропустить закрывающий тег (HTML4 valid/HTML5 Valid) JSFiddle
```
<li>One
<li>Two
```
Поместите пробел в сам тег (Примечание. Ранним исследователям Интернета это не понравится)
```
<li>One</li
><li>Two</li
>
```
Воспользуйтесь тем, что расстояние между элементами вычисляется как процент от размера шрифта родителя. Следовательно, установка размера родительского шрифта на 0 приводит к отсутствию места. Просто не забудьте установить ненулевой размер шрифта на li, чтобы сам текст имел ненулевой размер шрифта. Просмотр в JSFiddle.

Плавающие их

Поплавьте их. Вероятно, вы захотите clearfix родительский, если вы это сделаете.
```
li { float: left; display: block; }
```

Ответ 2

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

Просто сделайте следующее:

ul.frames {
  font-size: 0;
}
ul.frames li {
  font-size: 14px; font-size:1.4rem;
  display: inline;
}

Имейте в виду, что у нас не всегда будет доступ к изменению разметки. И попытка удалить пробелы из <li> с помощью JavaScript будет совершенно ненужной, если решение - это просто два свойства font-size.

Кроме того, при плавании <li> возникает другая потенциальная проблема: вы не сможете центрировать и выравнивать элементы списка.

Если вы попытаетесь сделать float:right; в <li>, то их порядок будет заменен, что означает: первый элемент в списке будет последним, второй элемент - последним и т.д.

Обратите внимание на этот другой пост здесь: SOA: Пространство между списками элементов Inline-Block

Ответ 3

Вы должны просто удалить все пробелы в тегах ul, как показано ниже: http://jsfiddle.net/dFRYL/3/

Поскольку элементы <li> являются встроенными, вы пишете пробелы внутри или между ними, у вас будут отображаемые пробелы.

Ответ 4

Вы можете использовать отрицательные поля следующим образом:

margin-right: -4px;
margin-bottom: -4px;

Посмотрите здесь.

Он также работает вверх и вниз, я добавил еще один, чтобы показать, что здесь.

Ответ 5

Я бы изменил ваши элементы li на встроенный блок.

Один человек не рекомендовал

li { margin: -4px; }

Но небольшое изменение в нем приведет к его работе даже при изменении размера шрифта или при масштабировании браузера

li{ margin-right: -0.25em; }

Это должно устранить эту проблему с белым пространством. Однако, если вы используете плохо разработанный шрифт, который не соответствует правильным стандартам высоты письма, это может вызвать проблему. Однако их сложнее найти, и большинство хостов Google не имеют этой проблемы.

Ответ 6

Причина, по которой вы получаете пробелы, состоит в том, что у вас есть пробелы между элементами (разрыв строки)

<ul>
     <li>One</li><li>
     Two</li><li>
     Three</li>
</ul>

Ответ 7

Использование display:inline; приводит к тому, что пробелы в HTML создают пробелы при отображении HTML.

Есть два решения:

1) Измените способ их появления в строке, я бы рекомендовал использовать поплавки во всех элементах списка, а затем с помощью clearfix сорта.

2) Удалите все пробелы между вашими элементами списка, например.

<li><img id="myImg" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg2" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg3" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg4" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li>

Лично я бы рекомендовал вариант 1 (я ненавижу display: inline)

Ответ 8

вот моя попытка. Надеюсь, поможет. Как заметил Шон Данвуди, пробел в вашем html может быть причиной пространства, но я поплыл ли и сделал изображение для отображения: block;. Оставленный комментарий о том, где я внес изменения. Надеюсь, что это поможет: http://jsfiddle.net/FJ3nV/

Здесь мои небольшие, но основные изменения:

/*
* Added float left
*/
ul.frames  li {
  margin: 0;
  list-style: none; 
  float:left;
}

/* 
*  Moved inline sizing here just to clear up obtrusive html.
*  Added display block.
*/
ul.frames li img{width:102px; height:80px; display:block;}