html - 使用自定义 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: '\2022 ';
  color: #828282;
  display: inline-block;
  margin-right: 10px;
}

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

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

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

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

Answer 1

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

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

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

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

您还需要重置 p 上的边距元素归零。

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

.docs-test::before {
  content: '\2022 ';
  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>