CSS ul li форматирование

Question

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

Спасибо.

ul {
  margin: 0;
  padding: 50;
}


/* The wider the #list_wrapper is, the more columns will fit in it */

#list_wrapper {
  width: 1000px
}


/* The wider this li is, the fewer columns there will be */

ul.multiple_columns li {
  text-align: right;
  float: right;
  list-style: decimal;
  height: 30px;
  width: 400px;
}

<form id="form1" runat="server">
  <div>
    <div id="list_wrapper">
      <ul class="column-count: 2;">
        <li>One: If I knew how to spell the ABC's I would write and write and write and write and write and write and write some more and write and write and write and write and write and write and write.</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
      </ul>
    </div>
  </div>
</form>

Answer 1

Измените что-нибудь ul (неупорядоченный список) на ol (упорядоченный список).

CSS становится:

ol{
margi... }

ol.multiple_columns li{
    text-align: right;
    float: ri... }

HTML становится:

<ol class="column-count: 2;">
<li>One: If I knew ...</li>
<li>Two</li>
...
</ol>

Чтобы сделать список номера жирным, но не текст, вы должны изменить класс ol в вашем CSS, чтобы включить font-weight:900;:

ol {
  margin: 0;
  padding: 50;
  font-weight: 900;
}

Затем оберните текст вашего <li>для включения <span style="font-weight:normal;"></span>, например, так:

<li><span style="font-weight:normal;">One: If I knew how to spell  ... </span></li>

Без интервала, возвращающего текст к нормальному весу, число и текст будут выделены жирным шрифтом.Кстати, font-weight колеблется от 100-900.900 - самый тяжелый доступный вес.