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

ul
{
list-style-position:inside;
} 

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

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

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

Answer 2

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

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

Answer 3

Похоже, вы можете (в некоторой степени) управлять интервалом, используя отступ для тега

.

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

Answer 4

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

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

Answer 5

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

Answer 6

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