Question

第一行与第二行之间存在线间距。如何删除它？

ol {
  color: #fff;
  list-style-type: decimal;
  background: #152a40;
  width: 100%;
  margin: 50px auto;
  padding: 1.2em 30px 1.2em 75px;
  line-height: 0;
}

ol li {
  position: relative;
  font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
  margin-bottom: 2px;
}

li p {
  font: 15px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #eaeaea;
}

<ol>
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa
      viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
  </li>

  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
  </li>

  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
  </li>
</ol>

Answer 1

问题源于列表项的计数器实际上是DOM节点的一部分：因此，增加它的字体大小，因此它的行高实际上会影响第一行的样子。

对于万无一失的设置，您需要将计数器与实际的mRowAdapter.notifyArrayItemRangeChanged(startingIndex, mRowAdapter.size());内容隔离。为此，我们可以使用CSS counters。

在父元素（在本例中为<li>）上声明自定义计数器（我们将其命名为listCounter），以便在每次出现时重置它，例如<ol>。
使用以下内容增加嵌套counter-reset: listCounter元素中的计数器：<li>。此外，由于我们使用自定义计数器，请使用counter-increment: listCounter;禁用默认计数器。
使用list-style: none元素上的::before伪元素，使用<li>显示我们的自定义计数器。

这是一个概念验证示例：

content: counter(listCounter)

ol {
  color: #fff;
  list-style-type: decimal;
  background: #152a40;
  width: 100%;
  margin: 50px auto;
  padding: 1.2em 30px 1.2em 75px;
  line-height: 0;
  
  /* Reset counter */
  counter-reset: listCounter;  
}

ol li {
  position: relative;
  margin-bottom: 2px;
  
  /* Increment counter by 1 in each <li> */
  counter-increment: listCounter;
  
  /* Hide default bullets/list counter */
  list-style: none;
  
  /*
  * Top padding to accommodate tall list counter
  * This value is a trial and error value, used to align baselines of counter and paragraph's first line
  */
  padding-top: 18px;
}

ol li::before {
  /* Set pseudo-element's content as counter */
  content: counter(listCounter) ".";
  
  font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
  
  /* Positioning, you decide how you want it to look */
  position: absolute;
  left: -10px;
  top: 0;
}

li p {
  font: 15px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #eaeaea;
}

Answer 2

由于列表中的数字较大，第一行的行高较大。您可以通过将line-height: 1;添加到ol li

来解决此问题

ol li {
  position: relative;
  font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
  margin-bottom: 2px;
  line-height: 1;
}

Answer 3

问题出现在font-size/line-height和li之间p。将line-height和li的{{1}}设置为更接近的值，或p设置为1，并使用li分隔margin {1}}项目。

li

ol {
  color: #fff;
  list-style-type: decimal;
  background: #152a40;
  width: 100%;
  margin: 50px auto;
  padding: 1.2em 30px 1.2em 75px;
  line-height: 0;
}

ol li {
  position: relative;
  font: bold italic 45px/1 Helvetica, Verdana, sans-serif;
  margin-bottom: 40px;
}

li p {
  font: 15px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #eaeaea;
}

Answer 4

这适用于您应用于 ol li

的风格

这是更新

ol {
  color: #fff;
  list-style-type: decimal;
  background: #152a40;
  width: 100%;
  margin: 50px auto;
  padding: 1.2em 30px 1.2em 75px;
  line-height: 0;
}

ol li {
  position: relative;
  font: bold italic 45px/1 Helvetica, Verdana, sans-serif;
  margin-bottom: 2px;
}

li p {
  font: 15px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #eaeaea;
}

<ol>
  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa
      viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p>
  </li>

  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
  </li>

  <li>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p>
  </li>
</ol>

CSS中的行差距

4 个答案: