Убрать пробел в списке при переходе на новую строку

@Omion · Регистрация: 19.05.2015

Студворк — интернет-сервис помощи студентам

Доброго времени.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1|</li><li>|2</li>
    <li>3|</li>
    <li>|4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
</html>

CSS
1
2
3
li{
  display: inline-block;
}

Вот пример.

Почему в списке переход новой строки делает пробел и как его убрать? Это не только в списке. Везде.???? Див к примеру такой же пробел делает. Это я че-то наделал или так всегда было? никогда не замечал. FW не подключен.

@Fedor92 · 12.12.2016, 15:26

Можно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1|</li><li>|2</li><li>3|</li><li>|4</li><li>5</li><li>6</li>
  </ul>
</body>
</html>

Можно эдак:

CSS
1
2
3
4
li{
  float:left;
  list-style:none
}

@Omion · 12.12.2016, 16:01 **[ТС]**

Ток надо родителю дописать overflow. Чтоб вместить все float элементы. А то схлопывается.

@mrtoxas · 12.12.2016, 17:18

А еще можно так.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    li{
    display: inline-block;
  }
  </style>
</head>
<body>
  <ul>
    <li>1|
    <li>|2
    <li>3|
    <li>|4
    <li>5
    <li>6
  </ul>
</body>
</html>

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

@Omion · 12.12.2016, 18:52 **[ТС]**

mrtoxas, зачет!!!!

Добавлено через 6 минут
mrtoxas, я не видел такого в документации сss, html. Откуда такая инфа?

@mrtoxas · 12.12.2016, 19:40

В официальной документации вы вряд ли такое найдете.

Cуть такова, что при конструкции...

HTML5
1
2
<li>item</li>
<li>item</li>

... после каждого закрывающего тега браузер вставляет текстовую ноду c переносом строки.

При следующей конструкции, браузер ничего не вставляет между элементами, т.к. переноса строки нет:

HTML5
1
<li>item</li><li>item</li>

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

HTML5
1
<li>item<li>item

В данном случае, браузер сам дополнит закрывающий тег, но он не будет учитывать никакие ноды, а закроет сразу же перед следующим тегом <li>.
Поэтому в следующей конструкции браузер просто проигнорирует переносы и так же закроет li перед следующим тегом, игнорируя все остальное.

HTML5
1
2
<li>item
<li>item

Получается, что конструкции

HTML5
1
2
3
4
5
6
<li>item</li><li>item</li>
<!-- и -->
<li>item<li>item
<!-- и -->
<li>item
<li>item

со стороны браузера - одинаковы.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	12.12.2016, 16:01 [ТС]
	Ток надо родителю дописать overflow. Чтоб вместить все float элементы. А то схлопывается. 0

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	12.12.2016, 18:52 [ТС]
	mrtoxas, зачет!!!! Добавлено через 6 минут mrtoxas, я не видел такого в документации сss, html. Откуда такая инфа? 0

Убрать пробел в списке при переходе на новую строку

Решение