CSS: управляющее пространство между маркером и <li>


177

Я хотел бы контролировать, сколько горизонтального пространства пуля толкает <li>вправо в <ol>или<ul> .

То есть вместо того, чтобы всегда иметь

*  Some list text goes
   here.

Я хотел бы иметь возможность изменить это, чтобы быть

*         Some list text goes
          here.

или

*Some list text goes
 here.

Я огляделся, но смог найти только инструкции по смещению всего блока влево или вправо, например, http://www.alistapart.com/articles/taminglists/


3
Почти дубликат stackoverflow.com/questions/2441059/...
Rds

Ответы:


161

Поместите его содержимое в spanотносительное положение, тогда вы можете контролировать пространство с помощью leftсвойства span.

li span {
  position: relative;
  left: -10px;
}
<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>


Просто для пояснения, тег <span> может быть семантическим, когда ему назначается класс, например <span class = "tel"> 123-456-7890 </ span> неявно семантический.
ingyhere

4
+1 за фактический ответ на вопрос парня;) (хотя в промежутке в идеале в идеале должен быть класс для хорошей практики защиты будущего, а также семантики: если в будущем у какого-либо javascript или разработки новых функций и т. Д. Была хорошая причина добавить дополнительные промежутки к вашему контенту, вещи могут запутаться)
user56reinstatemonica8

в Firefox не отображается должным образом текст перекрывает пули с помощью этого трюка
Джей Bhalodi

@ingyhere Я сомневаюсь, что это правда, так как я не могу найти ничего, что доказывает это утверждение. Можете ли вы предоставить какие-либо источники?
WoIIe

@ Уолл Хммм. Это старый комментарий, и я не уверен , концерн - Если это так ли <SPAN>могут использовать idили classтег, посмотри на W3C . Если вопрос заключается в том, может ли он передать смысловой смысл, посмотрите этот ответ . Технически, <SPAN>тег сам по себе является несемантическим встроенным элементом, но в некотором смысле обеспечивает большую гибкость при его повторном использовании. В настоящее время, я полагаю, можно использовать inline-blockдескриптор, чтобы позволить гораздо больший диапазон параметров форматирования.
ingyhere

120

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

(1) Используйте фоновое изображение:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Преимущества:

  • Вы можете использовать любое изображение для пули
  • Вы можете использовать CSS background-positionдля позиционирования изображения практически в любом месте по отношению к тексту, используя пиксели, ems или%

Недостатки:

  • Добавляет дополнительный (хотя и небольшой) файл изображения на вашу страницу, увеличивая вес страницы
  • Если пользователь увеличит размер текста в своем браузере, маркер останется в исходном размере. С увеличением размера текста он также, вероятно, будет становиться все более неуместным.
  • Если вы разрабатываете «отзывчивый» макет, используя только проценты для ширины, может быть трудно получить маркер именно там, где вы хотите, в диапазоне ширины экрана

2. Используйте отступы на <li>теге

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Преимущества:

  • Нет изображения = 1 файл меньше для загрузки
  • Регулируя дополнение на <li>, вы можете добавить столько , сколько заемных горизонтального пространства между маркером и текстом , как вам нравится
  • Если пользователь увеличивает размер текста, интервал и размер маркера должны пропорционально масштабироваться

Недостатки:

  • Невозможно переместить маркер ближе к тексту, чем браузер по умолчанию
  • Ограничено формами и размерами встроенных типов маркеров CSS
  • Пуля должна быть того же цвета, что и текст
  • Нет контроля над вертикальным расположением пули

(3) обернуть текст в дополнительный <span>элемент

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Преимущества:

  • Нет изображения = 1 файл меньше для загрузки
  • Вы получаете больший контроль над положением маркера, чем с опцией (2) - вы можете переместить его ближе к тексту (хотя, несмотря на все мои усилия, кажется, вы не можете изменить вертикальное положение, добавив padding-topк<span> . Кто-то может иметь Обходной путь для этого, хотя ...)
  • Пуля может быть другого цвета для текста
  • Если пользователь увеличивает размер текста, маркер должен масштабироваться пропорционально (при условии, что вы задаете отступы и поля в ems, а не в px).

Недостатки:

  • Требуется дополнительный не семантический элемент (это, вероятно, приведет к потере большего количества друзей в SO, чем в реальной жизни;), но это раздражает тех, кому нравится, когда их код является максимально компактным и эффективным, и это нарушает разделение представления и контента. что HTML / CSS должен предложить)
  • Нет контроля над размером и формой пули

Здесь мы надеемся на некоторые новые функции в стиле списка в CSS4, чтобы мы могли создавать более умные маркеры, не прибегая к изображениям или дополнительной разметке :)


4
Отличный ответ. Чтобы # 2 работал, убедитесь, что вы поддерживаете свою позицию стиля списка в outside.
Том Оджер

Элемент span является исправлением для меня. Я ответил +1 только потому, что предпочел отрицательную маржу абсолютному позиционированию - без веской причины.
FlipMcF

Если у вас есть текст, который переносит строки, я обнаружил, что мне нужно было добавить его display: block;к элементу span, чтобы обернутый текст также выстроился в линию (я также использовал теги привязки вместо интервалов)
Кевин М

Использование фоновых изображений для всего, что не только это, - почти всегда очень плохая идея. Они не могут быть сохранены, не напечатаны и не упомянуты программами чтения с экрана. Использование <span> - самый элегантный способ решить эту проблему. набивки не будут работать, так как они также меняют положение пуль.
Бахсау

3
Я бы НИКОГДА не использовал фоновое изображение для этого. Вы всегда можете использовать элемент: before с содержанием: "•"; затем вы используете отступ и абсолютную позицию перед элементом для управления им.
Янн Шабо

37

Это должно сделать это. Обязательно поставьте свои пули наружу. Вы также можете использовать псевдоэлементы CSS, если вы можете удалить их в IE7 вниз. Я действительно не рекомендую использовать псевдоэлементы для такого рода вещей, но это помогает контролировать расстояние.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}
<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>


5
Я не могу поверить, что этот ответ не принят. Это 100% CSS, он не добавляет лишних элементов <span>, и это заставило меня окончательно понять, почему существует внутренняя / внешняя опция! (и это принятый ответ на упомянутый повторяющийся вопрос ...)
MindTailor

1
Использование list-style-position: outsideи заполнение LIэлементов позволяет увеличить расстояние между точками маркера, но оно по-прежнему не работает за пределами указанного в браузере смещения. Смотрите это JS Bin .
Мезагома

4
Приложение: В современных браузерах (IE9 +, FF, Chrome и т. Д.) Используйте отрицательный знак text-indentна <UL>или, <LI>чтобы свести к минимуму вынужденное браузером расстояние между точкой маркера и <LI>контентом. То есть увеличивайте, padding-leftкак показано выше, чтобы увеличить расстояние, и уменьшайте, text-indentчтобы уменьшить расстояние между точкой маркера и содержимым по желанию.
Месагома

1
Увы , для всех вышеупомянутых настольных браузеров, если содержимое <LI>переносится во вторую строку, такие последующие строки в конечном итоге переопределяются с отступом на основе поля / отступа / отступа, которое нам удалось отменить для первой строки text-indent. Вздох
Месагома

Другой вариант - использовать псевдоэлементы: before и установить для содержимого то, что вам нравится. оттуда расположите псевдоэлементы по желанию.
Кевин

14

Старый вопрос, но здесь хорошо работает псевдоэлемент before.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Он работает очень хорошо и не требует много дополнительных правил или HTML.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

Ура!


3
Хороший и простой ответ. Я бы добавил, что настройка margin-left: -5px(или любое <li>
другое

2
Примечание: это не поддерживает висячие отступы
Eric

Потрясающий ответ, это отлично сработало при минимальном объеме работы! Спасибо!
KyleFarris

12

Для list-style-type: inline :

Это почти так же, как ответ DSMann8, но меньше кода CSS.

Вам просто нужно

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

ура


Это list-style-position: insideтоже работает , и это здорово!
Мэтт Додж

11

Вы можете использовать padding-leftатрибут в элементах списка ( не в самом списке!).


5
Обратите внимание, что это работает, только если для параметра list-style-positionустановлено значение по умолчанию outside.
Авг

Это должен быть принятый ответ, по крайней мере, для нормального использования. Это позволяет избежать использования <span>элемента только для дизайнерских целей.
Евкра

7

Использование text-indent для li работает лучше всего.

отступ текста: -x px; переместит пулю ближе к li и наоборот.

Использование относительного на span отрицательного левого может не работать должным образом со старыми версиями для IE. PS - старайтесь не давать постов столько, сколько сможете.


Это ведет себя странно на Chrome. Привязка к небольшому месту в -5px;
Ян

7

Вот еще одно решение с использованием css counter и псевдоэлементов. Я нахожу это более элегантным, так как он не требует использования дополнительной разметки HTML или классов CSS:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

Я использую неразрывные пробелы, так что интервал влияет только на первую строку моих элементов списка (если элемент списка длиннее одной строки). Вы могли бы использовать отступ здесь.


7

Старый вопрос, но все еще актуален. Я рекомендую использовать негатив text-indent. list-style-positionдолжно быть outside.

Плюсы:

  • Пуля правильно автоматически позиционируется
  • Изменение размера шрифта не нарушает положение маркера
  • Нет лишних элементов (тоже нет псевдоэлементов)
  • Работает как для RTL, так и для LTR без изменений в CSS.

Минусы:

  • пытаться
  • в
  • найти
  • один :)

2
Я пытался использовать этот метод, но отступ не работает для меня, если есть разрывы строк. Отступ текста будет делать отступ только в первой строке.
Мэтт

6

Неупорядоченный список начинается с тега ul. Каждый элемент списка начинается с По умолчанию элементы списка будут помечены маркерами (маленькие черные кружки):

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Вывод:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Свойство text-indent указывает отступ первой строки в текстовом блоке.
Примечание: допустимы отрицательные значения. Первая строка будет смещена влево, если значение отрицательное.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

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

это лучший ответ и должен быть принят. минимальный CSS!
KawaiKx

5

Кажется, вы можете (в некоторой степени) контролировать интервал, используя отступ для тега <li>.

<style type="text/css">
    li { padding-left: 10px; }
</style>

Уловка в том, что это не позволяет вам делать это так, как ваш последний пример.

Для этого вы можете попробовать отключить list-style-type и использовать & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

5

Похоже, что есть более чистое решение, если вы хотите уменьшить расстояние между точкой маркера и текстом:

li:before {
    content: "";
    margin-left: -0.5rem;
}

4

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

Смотрите ответ на этот вопрос


3
ul
{
list-style-position:inside;
} 

Определение и использование

Свойство list-style-position указывает, должны ли маркеры элементов списка отображаться внутри или вне потока содержимого.

Источник: http://www.w3schools.com/cssref/pr_list-style-position.asp


1
Это не отвечает на вопрос. Он запрашивает способ контроля размера отступа.
Эзотерическое

0

Можно использовать ul li:beforeи фоновое изображение, и назначить position: relativeи position:absoluteдля liи li:before, соответственно. Таким образом, вы можете создать изображение и расположить его где угодно по отношению к li.


0

Используйте padding-left:1em; text-indent:-1emдля <li>тега.
Тогда list-style-position: insideдля <ul>тега.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

0

Следующее решение хорошо работает, когда вы хотите переместить текст ближе к маркеру и даже если у вас есть несколько строк текста.

margin-right позволяет переместить текст ближе к пуле

text-indent обеспечивает правильное выравнивание нескольких строк текста

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}
<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

введите описание изображения здесь


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.