Как убрать промежуток между пунктами горизонтального списка? | Рецепты
Превращение списка в горизонтальный обычно делается с помощью свойства display со значением inline-block. Это превращает пункты списка в строчно-блочные элементы, которые располагаются в одну строку. При этом между пунктами списка появляется небольшой промежуток, хорошо заметный при использовании заливки фона (пример 1).
Пример 1. Горизонтальный список
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; } ul.hr li { display: inline-block; /* Строчно-блочный элемент */ padding: 4px; /* Поля вокруг текста */ background: #0075b2; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <ul> <li>Мчади</li> <li>Када на мацони</li> <li>Пахлава</li> <li>Кчуч</li> <li>Лилибдж</li> </ul> </body> </html>
Таким образом и возникают пробелы между словами.Для избавления от промежутков между пунктами списка существует несколько способов, ниже перечислим наиболее популярные.
Написание в одну строку
Если ненужные нам промежутки возникают из-за перевода строк, то достаточно написать код в одну строку без пробелов и переводов.
<ul> <li>Мчади</li><li>Када на мацони</li><li>Пахлава</li><li>Кчуч</li><li>Лилибдж</li> </ul>Использование комментариев
Пробелы и переводы строки можно скрыть с помощью пустого комментария, поместив его между закрывающим и открывающим тегами.
<ul> <li>Мчади</li><!— —><li>Када на мацони</li><!— —><li>Пахлава</li><!— —><li>Кчуч</li><!— —><li>Лилибдж</li> </ul> Комментарии скрывают для браузера пробелы и переводы строк, поэтому браузер воспринимает такой код как одну строку.
Нет закрывающих тегов
Если в коде списка убрать закрывающий тег </li>, то браузер добавит его самостоятельно перед открывающим тегом <li>, тем самым исключив перенос строк.
<ul> <li>Мчади <li>Када на мацони <li>Пахлава <li>Кчуч <li>Лилибдж </ul>Размер шрифта
Предыдущие методы основывались на изменении кода HTML, что не всегда возможно или удобно. Стили позволяют решить нашу проблему, не затрагивая HTML. Одним из способов является изменение шрифта до 0. Для всего списка ul свойство font-size устанавливаем нулевым, а для пунктов списка восстанавливаем до значения 1rem (пример 2). Получается, что пробел станет символом со шрифтом нулевого размера и перестанет отображаться.
Пример 2. Использование font-size
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; font-size: 0; } ul.
hr li {
display: inline-block; /* Строчно-блочный элемент */
padding: 4px; /* Поля вокруг текста */
background: #0075b2; /* Цвет фона */
color: #fff; /* Цвет текста */
font-size: 1rem; /* Размер текста */
}
</style>
</head>
<body>
<ul>
<li>Мчади</li>
<li>Када на мацони</li>
<li>Пахлава</li>
<li>Кчуч</li>
<li>Лилибдж</li>
</ul>
</body>
</html>Использование float
Если промежутки между горизонтальными пунктами списка возникают из-за использования свойства display, то в данном случае можно от него отказаться в пользу других вариантов. Для горизонтального размещения элементов применяется старый известный метод, основанный на свойстве float. Пунктам списка задаём float со значением left, а для списка ul устанавливаем overflow со значением hidden (пример 3). Свойство overflow необходимо для ограничения действия float, которое продолжается и за пределами списка.
Пример 3. Использование float
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; overflow: hidden; /* Отменяем действие float */ } ul.hr li { float: left; /* Выстраиваем по горизонтали */ list-style: none; /* Убираем маркеры списка */ padding: 4px; /* Поля вокруг текста */ background: #0075b2; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <ul> <li>Мчади</li> <li>Када на мацони</li> <li>Пахлава</li> <li>Кчуч</li> <li>Лилибдж</li> </ul> </body> </html>Использование flex
Пример 4. Использование flex
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов и полей */ margin: 0; padding: 0; display: flex; /* Включаем флексы */ } ul.hr li { list-style: none; /* Убираем маркеры списка */ padding: 4px; /* Поля вокруг текста */ background: #0075b2; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <ul> <li>Мчади</li> <li>Када на мацони</li> <li>Пахлава</li> <li>Кчуч</li> <li>Лилибдж</li> </ul> </body> </html> СпискиСм. также
- <big>
- display
- display в CSS
- float
- float в CSS
- font-size
- Блочные элементы
- Буквица
- Влияние float
- Выравнивание картинок
- Единицы размера в CSS
- Использование в вёрстке
- Описание float
- Открываем блочную модель
- Подробнее о позиционировании
- Поток
- Примеры использования float
- Размер текста
- Свойства шрифта в CSS
- Создание флексбоксов
- Спойлер
- Строчно-блочные элементы
- Строчные элементы
Секрет 12.
Неразрывный пробел в презентации – Эффективная работа в MS OfficeНа уроке 1 я рассказала вам, что такое неразрывный пробел в Word’е.
Так как строки образуются автоматически, то не редкость, когда в конце одной строки болтается число, а в начале следующей строки ‒ размерность. Так же ужасно смотрится предлог в гордом одиночестве и частицы «не» и «ни». Чтобы связать два слова «цепью» используют неразрывный пробел.
Неразрывный пробел образуется одновременным нажатием клавиш Shift+Ctrl+пробел:
И если в тексте документа эти случаи вполне терпимы, то в презентациях просто недопустимы в силу особенностей восприятия (см. Д3 Свойства восприятия).
Кстати, хочу заметить, что высококвалифицированные полиграфисты никогда не допустят одиночных предлогов и разорванных числового значения с размерностью, как на приведённом мной примере. Вот вам несколько ссылок:
- https://studopedia.ru/4_51586_pravila-nabora-i-verstki.html,
- http://www.
creajob.com/ar8416ru-minikodeks-verstki1-ehlementarnye-pravila-tipografiki.html,
creajob.com/ar8416ru-minikodeks-verstki1-ehlementarnye-pravila-tipografiki.html,Вы скажете, что в Point’е никаких неразрывных пробелов нет. И будете абсолютно правы! И тем не менее…
По окончании урока вы сможете:
- Искусственно образовать новую строчку в тексте слайда
- Искусственно вставить на разрывный пробел в текст слайда
Скачайте учебную презентацию тут. Откройте учебную презентацию. На самом первом слайде вы увидите, что в предложении два предлога «в» находятся в конце строчек:
1. Новая строчка в тексте слайда
Шаг 1. Вставьте разрыв строки перед первым предлогом «в»:
- Подведите курсор-стрелку перед предлогом «в» пока не появится текстовый курсор
- Щёлкните ЛМ
- Одновременно нажмите клавиши Shift+Enter
Получаем такую картину:
Шаг 2. Теперь выделяем текстовый блок и меняем размер шрифта (двойной щелчок ЛМ по тексту → лента Главная → группа команд Шрифт → кнопка выпадающего меню размера шрифта → размер шрифта 24 или другой на ваше усмотрение):
Получили, что получили:
Как видите, искусственное образование новой строчки далеко не панацея.
Конечно, я пользуюсь приёмом искусственного образования строчки. Но только на последней стадии форматирования презентации, когда дальнейших правок не предвидится.
А теперь попробуем неразрывный пробел.
2. Неразрывный пробел в тексте слайда
Шаг 1. Выделите текст слайда (тройной щелчок ЛМ по тексту)
Шаг 2.
Скопируйте текст в буфер обмена (лента Главная → группа команд Буфер обмена → кнопка Скопировать, можно Вырезать):Шаг 3. Откройте новый документ Word и вставьте содержимое буфера обмена (лента Главная → группа команд Буфер обмена → команда Вставить):
Обратите внимание на непечатаемый символ «Разрыв строки» после слова «поступает» и перед предлогом «в».
| Понять и запомнить! | И в Word’е и в Point’е есть непечатаемые символы. Но… В Word’е мы можем включить режим непечатаемых символов и увидеть эти символы. В Point’е нет режима непечатаемых символов, поэтому мы увидеть эти символы не можем. |
Мне очень недостаёт режима непечатаемых символов в Point’е!
Шаг 4. Удалите непечатаемый символ «Разрыв строки» (выделяем непечатаемый символ → клавиша Delete):
Шаг 5. Поставьте неразрывный пробел после предлогов «в» (выделите пробел → одновременное нажатие клавиш на клавиатуре Shift+Ctrl+пробел):
- первый предлог «в»
Обратили внимание, что непечатаемый символ «Пробел» изменился на кружок непечатаемого символа «Неразрывный пробел?
- второй предлог «в»
Шаг 6. Выделите текст (см. урок 2) тройным щелчком ЛМ и скопируйте в буфер обмена (лента Главная → группа команд Буфер обмена → команда Копировать):
Возвращаемся в Point (надеюсь, вы его не закрыли?). Я буду работать в своей презентации, но можно открыть новую презентацию – это не важно.
Шаг 7. Выделите заполнитель (см. Секрет 6) с текстом (подведите курсор к границе заполнителя → как только курсор превратится в крестик с разнонаправленными стрелками щёлкните ЛМ) и вставьте содержимое буфера обмена (лента Главная → группа команд Буфер обмена → команда Вставить):То есть мы заменили содержимое заполнителя на содержимое буфера обмена.
Я даже вставила содержимое буфера обмена дважды и получила такую картину:
Теперь нам надо убедиться, что мы перенесли из документа в презентацию непечатаемые символы «Неразрывный пробел».
Шаг 8. Задайте первому абзацу размер шрифта 20 пт, а второму абзацу – 28 пт (выделяем абзац → лента Главная → группа команд Шрифт → кнопка выпадающего меню Размер шрифта):
Как видите, теперь совершенно неважно, как вы будете изменять текст – предлог «в» всегда будут идти в связке со следующим словом.
Я уже слышу возражения, что сделать таким образом неразрывный пробел для всех предлогов долго, что начальство торопит, времени нет.
На это меня два возражения:
Во-первых, давайте уважать наших клиентов и делать для них презентации высшего качества.
А во-вторых, заменить в Word’е простые пробелы в предлогах, союзах, частицах «не» и «ни» на неразрывные пробелы можно ОДНОМОМЕНТНО! Для этого нужно знать возможности команды Заменить и понимать язык подстановочных символов. А это уже немного попозже. Я обязательно расскажу вам об этой замечательной возможности Word’а, но полагаю, что в один урок мы не уложимся.
Теперь вы сможете:
- Искусственно образовать новую строчку в тексте слайда
- Искусственно вставить неразрывный пробел в текст слайда
html — Как убрать пробел между словами CSS
спросил
Изменено 2 года, 5 месяцев назад
Просмотрено 2к раз
Я добавил межбуквенных интервалов к своим сильным элементам, и у меня был большой пробел в начале каждого слова: .
Я попытался добавить интервал между словами: -4px , но пробел остался прежним :/ Как я могу удалить это пространство (между «The» и «852»?) Я хотел бы, чтобы каждая буква находилась на одинаковом расстоянии. Как если бы между словами не было пробелов.
CSS:
.sub-lead {
выравнивание текста: по ширине;
семейство шрифтов: «Поппинс», без засечек;
вес шрифта: 300;
}
сильный {
межбуквенный интервал: 3px;
}
HTML:
8 5 2 ОПЫТ 90 ВЫ 0 8 5 ЕСТЬ
PS: Я тоже пробовал убрать пробелы в коде, но это ничего не меняет.
РЕДАКТИРОВАТЬ: Пробел между каждым символом текста должен быть одинаковым, даже если это не одно и то же слово. Вот почему я попытался использовать межбуквенный интервал для сильных элементов.
- html
- css
Ваша проблема в том, что вы добавляете несколько пробелов вместе, но без во встроенном текстовом элементе будет отображаться только один пробел.
Это происходит из-за коллапса белого пространства. Это приводит к тому, что пространство отображается в первом межбуквенном интервале , который в начале больше, а в конце меньше. Отрегулируйте интервал соответствующим образом, и он должен работать, например. начинать каждый раздел с пробела, вместо того, чтобы добавлять по одному в начале и в конце.
В зависимости от фактического размера рендеринга шрифта вы все равно можете получить некоторую неравномерность субпикселей, но если вы не хотите удалить все интервалы и добавить margin к тегам , это, вероятно, достойная отправная точка.
.sub-лид {
выравнивание текста: по ширине;
семейство шрифтов: «Поппинс», без засечек;
вес шрифта: 300;
}
сильный {
межбуквенный интервал: 3px;
}
<дел>
ТО 8 5 2 ОПЫТ 90 ВЫ 0 8 5 ЕСТЬ
Это — это полужизнеспособная альтернатива, но пробелы отображаются как по вертикали, так и по горизонтали, поэтому, если у вас есть лишних пробелов/разрывов в любом месте, вы можете получить некоторые странные результаты:
Рассмотрите возможность использования «span» вместо «strong» и сделайте текст полужирным в CSS. Span великолепен, потому что он поставляется с 0 предопределенными стилями, чего нельзя сказать почти ни о каком другом html-элементе.
Вы не хотите, чтобы это было чьим-то первым впечатлением от вашего письма.
Ваш комментарий будет первым