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

Question

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

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

*  Some list text goes
   here.

Я бы хотел изменить это значение на

*         Some list text goes
          here.

или

*Some list text goes
 here.

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

Answer 1

Поместите его содержимое в 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>

Answer 2

Подводя итог остальным ответам здесь - если вы хотите более точно контролировать пространство между маркерами и текстом в элементе списка <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, а не в пикселях)

Недостатки:

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

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

Answer 3

Это должно сделать это. Обязательно поставьте свои пули наружу. Вы также можете использовать псевдоэлементы 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>

Answer 4

Старый вопрос, но здесь хорошо работает псевдоэлемент: 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>

Ура!

Answer 5

Для тип стиля списка: встроенный :

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

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

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

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

Приветствия

Answer 6

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

Answer 7

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

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

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

Answer 8

Вот еще одно решение с использованием 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
}

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

Answer 9

Неупорядоченный список начинается с тега 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>

Answer 10

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

Плюсы:

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

Минусы:

• попробуйте
• до
• найти
• one:)