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

使用开始属性

芬达
茶
可口可乐
芬达
茶
可口可乐
芬达
茶
可口可乐
芬达
茶

<ol start="7">
  <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>

Answer 2

哇...花了我很长时间才明白你在问什么...无论如何，你可以使用自定义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>

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

2 个答案: