CSS: контроль пространства между пулей и

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

<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)

недостатки:

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

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

это должно помочь. Не забудьте установить ваши пули на улицу. вы также можете использовать псевдоэлементы 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: '92';
  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>

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

<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 атрибут в элементах списка (не в самом списке!).

использование текстового отступа на li работает лучше всего.

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

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

неупорядоченный список начинается с тега 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-счетчика и псевдо-элементов. Я нахожу его более элегантным, поскольку он не требует использования дополнительной разметки 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: '22 a0 a0 a0'; //bullet unicode followed by 3 non breakable spaces
}

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

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

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

просмотреть ответ этот вопрос

ul
{
list-style-position:inside;
} 

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

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

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

Кажется, вы можете (несколько) контролировать интервал с помощью заполнения на теге

.

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

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

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

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

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

плюсы:

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

плюсы:

• попробовать
• до
• найти
• один :)

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

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