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

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

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

*  Some list text goes
   here.

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

*         Some list text goes
          here.

или

*Some list text goes
 here.

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

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

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

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

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

Ура!

Для list-style-type: inline :

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

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

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

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

ура

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

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

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

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

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

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

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

Плюсы:

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

Минусы:

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

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

Кажется, вы можете (в некоторой степени) контролировать интервал, используя отступ для тега <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>

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

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

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

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

ul
{
list-style-position:inside;
} 

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

Свойство 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>тега.

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

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

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>

использовать <span style="display: flex;">внутри каждого <li>.