Я хотел бы контролировать, сколько горизонтального пространства пуля толкает <li>
вправо в <ol>
или<ul>
.
То есть вместо того, чтобы всегда иметь
* Some list text goes
here.
Я хотел бы иметь возможность изменить это, чтобы быть
* Some list text goes
here.
или
*Some list text goes
here.
Я огляделся, но смог найти только инструкции по смещению всего блока влево или вправо, например, http://www.alistapart.com/articles/taminglists/
html
css
html-lists
erjiang
источник
источник
Ответы:
Поместите его содержимое в
span
относительное положение, тогда вы можете контролировать пространство с помощьюleft
свойстваspan
.источник
<SPAN>
могут использоватьid
илиclass
тег, посмотри на W3C . Если вопрос заключается в том, может ли он передать смысловой смысл, посмотрите этот ответ . Технически,<SPAN>
тег сам по себе является несемантическим встроенным элементом, но в некотором смысле обеспечивает большую гибкость при его повторном использовании. В настоящее время, я полагаю, можно использоватьinline-block
дескриптор, чтобы позволить гораздо больший диапазон параметров форматирования.Подводя итог остальным ответам здесь - если вы хотите более точно контролировать пространство между маркерами и текстом в
<li>
элементе списка, вы можете выбрать следующие варианты:(1) Используйте фоновое изображение:
Преимущества:
background-position
для позиционирования изображения практически в любом месте по отношению к тексту, используя пиксели, ems или%Недостатки:
2. Используйте отступы на
<li>
тегеПреимущества:
<li>
, вы можете добавить столько , сколько заемных горизонтального пространства между маркером и текстом , как вам нравитсяНедостатки:
(3) обернуть текст в дополнительный
<span>
элементПреимущества:
padding-top
к<span>
. Кто-то может иметь Обходной путь для этого, хотя ...)Недостатки:
Здесь мы надеемся на некоторые новые функции в стиле списка в CSS4, чтобы мы могли создавать более умные маркеры, не прибегая к изображениям или дополнительной разметке :)
источник
outside
.display: block;
к элементу span, чтобы обернутый текст также выстроился в линию (я также использовал теги привязки вместо интервалов)Это должно сделать это. Обязательно поставьте свои пули наружу. Вы также можете использовать псевдоэлементы CSS, если вы можете удалить их в IE7 вниз. Я действительно не рекомендую использовать псевдоэлементы для такого рода вещей, но это помогает контролировать расстояние.
источник
list-style-position: outside
и заполнениеLI
элементов позволяет увеличить расстояние между точками маркера, но оно по-прежнему не работает за пределами указанного в браузере смещения. Смотрите это JS Bin .text-indent
на<UL>
или,<LI>
чтобы свести к минимуму вынужденное браузером расстояние между точкой маркера и<LI>
контентом. То есть увеличивайте,padding-left
как показано выше, чтобы увеличить расстояние, и уменьшайте,text-indent
чтобы уменьшить расстояние между точкой маркера и содержимым по желанию.<LI>
переносится во вторую строку, такие последующие строки в конечном итоге переопределяются с отступом на основе поля / отступа / отступа, которое нам удалось отменить для первой строкиtext-indent
. ВздохСтарый вопрос, но здесь хорошо работает псевдоэлемент before.
Он работает очень хорошо и не требует много дополнительных правил или HTML.
Ура!
источник
margin-left: -5px
(или любое<li>
Для list-style-type: inline :
Это почти так же, как ответ DSMann8, но меньше кода CSS.
Вам просто нужно
ура
источник
list-style-position: inside
тоже работает , и это здорово!Вы можете использовать
padding-left
атрибут в элементах списка ( не в самом списке!).источник
list-style-position
установлено значение по умолчаниюoutside
.<span>
элемента только для дизайнерских целей.Использование text-indent для li работает лучше всего.
отступ текста: -x px; переместит пулю ближе к li и наоборот.
Использование относительного на span отрицательного левого может не работать должным образом со старыми версиями для IE. PS - старайтесь не давать постов столько, сколько сможете.
источник
Вот еще одно решение с использованием css counter и псевдоэлементов. Я нахожу это более элегантным, так как он не требует использования дополнительной разметки HTML или классов CSS:
Я использую неразрывные пробелы, так что интервал влияет только на первую строку моих элементов списка (если элемент списка длиннее одной строки). Вы могли бы использовать отступ здесь.
источник
Старый вопрос, но все еще актуален. Я рекомендую использовать негатив
text-indent
.list-style-position
должно бытьoutside
.Плюсы:
Минусы:
источник
Неупорядоченный список начинается с тега ul. Каждый элемент списка начинается с По умолчанию элементы списка будут помечены маркерами (маленькие черные кружки):
Вывод:
Свойство text-indent указывает отступ первой строки в текстовом блоке.
Примечание: допустимы отрицательные значения. Первая строка будет смещена влево, если значение отрицательное.
источник
Кажется, вы можете (в некоторой степени) контролировать интервал, используя отступ для тега <li>.
Уловка в том, что это не позволяет вам делать это так, как ваш последний пример.
Для этого вы можете попробовать отключить list-style-type и использовать & bull;
источник
Похоже, что есть более чистое решение, если вы хотите уменьшить расстояние между точкой маркера и текстом:
источник
Вы также можете использовать замену фонового изображения в качестве альтернативы, что дает вам полный контроль над вертикальным и горизонтальным расположением.
Смотрите ответ на этот вопрос
источник
Определение и использование
Свойство list-style-position указывает, должны ли маркеры элементов списка отображаться внутри или вне потока содержимого.
Источник: http://www.w3schools.com/cssref/pr_list-style-position.asp
источник
Можно использовать
ul li:before
и фоновое изображение, и назначитьposition: relative
иposition:absolute
дляli
иli:before
, соответственно. Таким образом, вы можете создать изображение и расположить его где угодно по отношению к li.источник
Используйте
padding-left:1em; text-indent:-1em
для<li>
тега.Тогда
list-style-position: inside
для<ul>
тега.источник
Следующее решение хорошо работает, когда вы хотите переместить текст ближе к маркеру и даже если у вас есть несколько строк текста.
margin-right
позволяет переместить текст ближе к пулеtext-indent
обеспечивает правильное выравнивание нескольких строк текстаисточник
использовать
<span style="display: flex;">
внутри каждого<li>
.источник