html - <ol> <li> 奇怪的挑战 - 保持左边距

Question

有一个巨大的 html 可用于生成 pdf。有很多部分带有编号的段落。它看起来像这样:

.list-number {
  float: left;
}

.list-content {
  padding-left: 18px;
  text-align: justify;
}

<div>
  <div class="list-number">7.</div>
  <div class="list-content">
    Fanta</div>
</div>
<div>
  <div class="list-number">8.</div>
  <div class="list-content">Coca Cola</div>
</div>
<div>
  <div class="list-number">9.</div>
  <div class="list-content">
    Coca cola</div>
</div>
<div>
  <div class="list-number">10.</div>
  <div class="list-content">Fanta</div>
</div>
<div>
  <div class="list-number">11.</div>
  <div class="list-content">Sprite</div>
</div>

现在我必须添加另一个部分。主要区别在于它是动态列表，所以我必须使用 ol li 标签。我做了这样的事情:

<ol>
  <li>Fanta</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Fanta</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Fanta</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Fanta</li>
  <li>Tea</li>
</ol>

问题是两位数字 - 在 div 部分中，点后没有空格。如何制作 ol-li 列表来模拟相同的情况？

Answer 1

哇...我花了很长时间才明白你在问什么...无论如何，你可以使用自定义 counter而不是 OL 中的列表样式，并根据需要设置样式。

ol {
  counter-reset: number;         
  list-style-type: none;
}

li::before {
  float:left;  width:20px; 
  counter-increment: number;            
  content: counter(number) ".";   
}

<ol>
  <li>Fanta</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Fanta</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Fanta</li>
  <li>Tea</li>
  <li>Coca Cola</li>
  <li>Fanta</li>
  <li>Tea</li>
</ol>

最好的部分是您可以根据当前结构调整它:

body {
  counter-reset: number 7;
/*I set it at 7 for presentation purposes, most likely you'll want it at 0*/         
}

.list-number {
  float: left;
}

.list-content {
  padding-left: 18px;
  text-align: justify;
}


.list-number::before {
  counter-increment: number;            
  content: counter(number) ".";   
}

<div>
  <div class="list-number"></div>
  <div class="list-content">Fanta</div>
</div>
<div>
  <div class="list-number"></div>
  <div class="list-content">Coca Cola</div>
</div>
<div>
  <div class="list-number"></div>
  <div class="list-content">Coca cola</div>
</div>
<div>
  <div class="list-number"></div>
  <div class="list-content">Fanta</div>
</div>
<div>
  <div class="list-number"></div>
  <div class="list-content">Sprite</div>
</div>