Question

已解决！
我将边距设置为0（而不是0自动），并为type =“ a”有序列表中的每个li添加了填充。

初始问题
我有编号的项目符号列表，其中包括项目符号类型（例如a，b，c），如下所示：

text.html

<div class="content-section">
  <ol> 
    <li>this is a sample text that stretches across the page
       and it takes up the second line</li>
    <ol type="a"> 
      <li>this is a sample text that stretches across the page</li>
      <li>this is a sample text that stretches across the page</li>
      <li>this is a sample text that stretches across the page</li>
    </ol>
    <li>this is a sample text that stretches across the page
        and it takes up the second line</li>
    <ol type="a"> 
       <li>this is a sample text that stretches across the page</li>
       <li>this is a sample text that stretches across the page</li>
       <li>this is a sample text that stretches across the page</li>
     </ol>
   <ol>
<div>

text.css

.content-section {
  p,
  li {
    max-width: 900px;
    text-align: justify;
    margin: 0 auto;
    color: $color-hint;
  }
}

它是什么样的：

1) this is a sample text that stretches across the page
   and it takes up the second line
   a. this is a sample text that stretches across the page
   b. this is a sample text that stretches across the page
   c. this is a sample text that stretches across the page
2) this is a sample text that stretches across the page
   and it takes up the second line
   a. this is a sample text that stretches across the page
   b. this is a sample text that stretches across the page
   c. this is a sample text that stretches across the page

我试图证明内容的合理性，以使子项目符号点与编号的项目符号点位于同一点，以便使内容的两面都具有合理性。

关于如何执行此操作的任何想法？我尝试调整填充和边距，但不起作用

Answer 1

我会使用HTML

<p>1) This is sample Text</p>
<ol type = "a" id = "bullet">
  <li>Sample Text</li>
  <li>Sample Text</li>
  <li>Sample Text</li>
</ol>
<p>2) This is sample text</p>
<ol type = "a" id = "bullet">
  <li>Sample Text</li>
  <li>Sample Text</li>
  <li>Sample Text</li>
</ol>

然后将其添加到CSS

#bullet{
left:10px;
}

可能不需要CSS，因为列表会自动缩进

用项目符号点对齐子项目符号点

1 个答案: