Как точно настроить положение списка пули / номера

Question

Я сделал список в HTML:

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>   

Когда я рендерим это в Antennahouse Formatter, это будет результат:

Я могу изменить отступ текста в CSS:

ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

padding-left - расстояние, обозначенное синей линией. Но я бы хотел изменить положение числа: теперь оно центрировано в этом пространстве шириной 6,3 мм, и я хочу выровнять его по левой стороне этого пространства (переместить число в точку, обозначенную красной линией).

Отступ текста и поля слева не влияют на эту позицию. Единственное свойство, которое я могу найти, которое влияет на положение числа, это list-style-position, но оно имеет только значения inside и outside.

Есть ли способ изменить положение этого номера?

Я пробовал различные варианты этого:

li.listnumber:before {
    text-align: left;
}

, но это не влияет на автоматически сгенерированное число.

Answer 1

ol имеет значение по умолчанию padding-left: 40px; см. Значения CSS по умолчанию для элементов HTML

Вы можете легко изменить ol padding-left с помощью:

ol.listnumber{
   padding-left: 10px;
}

ol.listnumber {
    padding-left: 10px;
}
ol li {
    padding-left: 6.3mm;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol>

Answer 2

Дайте ::marker ширину и выровняйте его по левому краю:

li::marker {
  text-align: start;
  width: 6.3mm;
}

Answer 3

Я попробовал одно решение для этого

У нас есть ниже свойство css по умолчанию для элемента ol

  padding-inline-start: 40px;

Мы можем переопределить этосвойство, как показано ниже

 padding-inline-start: 10px;

Ниже приведен фрагмент кода

ol {
  padding-inline-start: 10px;
}

li {
    padding-left: 10px;
    text-indent: 0mm;
    margin-left: 0mm;
    list-style-type: decimal;
}

<ol class="listnumber">
    <li class="listnumber">
        <p class="listnumber">list number</p>
    </li>
</ol> 

Надеюсь, это поможет Спасибо ...

Answer 4

Перейдите по этой ссылке, она объясняет, как вы можете удалить предопределенные стили маркеров и создать свой собственный маркер с желаемым стилем:

https://www.w3schools.com/howto/howto_css_bullet_color.asp

ul {
    list-style: none; /* Remove default bullets */
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: red; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

Надеюсь, это поможет, спасибо.

Answer 5

Если вы установите позицию list-style-position внутри, вы можете определить красную линию с помощью отступа слева от ol. См. Пример и наведите курсор на список, чтобы увидеть эффект. Я добавил границу для визуализации.

ol {
  border: 1px solid black;
  padding-left: 0; /* or whatever*/
}

ol:hover {
  padding-left: 6mm;
}

ol li {
  list-style-position: inside;
}

ol li p {
  padding-left: 6.3mm;
  display: inline-block;
  margin: 0;
}

<ol class="listnumber">
  <li class="listnumber">
    <p class="listnumber">list number</p>
  </li>
</ol>