降低列表样式以适合文本css

Question

我正在尝试更改列表项的样式以适应文本的其余部分（即字体大小等），但我似乎无法改变它。

创建列表的代码是：

%ol.question-parts
   - test_question.answers.each do |answer|
      %li.question-text
         %div.question-part-description
           %p=change_math_delims(answer.question_part.description)

我目前显示列表的代码是：

ol {
  list-style-type: lower-alpha;
  list-style-position: outside;
  margin: 0;
  padding: 0;
}

li {
  display: list-item;
  padding: 1px 1px 1px 1px;
}

但我希望定位较低的alpha列表样式的大小...此时显示如下：

任何想法？

Answer 1

我不知道这是不是你想要的代码

我在content:counter li

上使用了pseudo-element

＆＃13;

＆＃13;

ol{
    list-style:none;
}

li:before{
    content: counter(list, lower-alpha)".";
  counter-increment: list;
    font-size:30px;
}

＆＃13;

<ol>
    <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
     <li>Text</li>
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不确定你的文字和清单是如何分开的。您是否在HTML中创建了这样的列表：？

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

JS小提琴here