处理具有自定义 CSS 内容的列表项内的段落

Question

这是段落在无样式列表项 (<li>) 中的样子：

<li>
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

但是，当使用自定义列表样式类型时，它看起来像这样：

这个HTML是：

<li class="docs-test">
  <p>
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
    hehehe
  </p>
</li>

CSS是：

.docs-test {
  color: red;
  list-style-type: none;
}

.docs-test::before {
  content: '22 ';
  color: #828282;
  display: inline-block;
  margin-right: 10px;
}

.docs-test p {
  display: inline-block;
}

我知道对于这个特定的自定义列表样式类型，我可以使用 list-style-image。但是，我还有其他海关列表样式类型，我无法使用 list-style-image。

如何才能使具有自定义 CSS 内容列表样式类型的列表项中的段落不会跳到下一个 "line" 的开头？目标是让这些自定义列表样式列表以与没有样式的常规列表相同的方式处理段落。

http://jsbin.com/kimilaniga/1/edit?html,css,output

Answer 1

这是实现所需样式的一种方法。

使用绝对定位将::before伪元素生成的内容放置在<li>块元素左边缘的左侧。

首先，您需要将position: relative 添加到.docs-test CSS 规则中，以允许伪元素相对于li 父块进行定位。

其次，添加 position: absolute 和适当的 top 和 left 偏移值以获得您想要的样式。

您还需要将 p 元素的边距重置为零。

.docs-test {
  color: red;
  list-style-type: none;
  display: inline-block;
  position: relative;
}

.docs-test::before {
  content: '22 ';
  color: #828282;
  display: block;
  text-align: center;
  position: absolute;
  outline: 1px dotted gray; /* for demo only */
  width: 20px;
  left: -20px;
  top: 0;
}

.docs-test p {
  display: inline-block;
  margin: 0;
}

<ul>
  <li>
    <p>
      hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe
    </p>
  </li>

  <li class="docs-test">
    <p>
      hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe hehehe
      </p>
  </li>
</ul>

处理具有自定义 CSS 内容的列表项内的段落

Handling paragraphs inside list items with a custom CSS content

html

css

html-lists

css-content