使用自定義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，輸出

Answer 1

這是一種實現所需樣式的方法。

使用絕對定位將生成的內容從::before偽元素放置到<li>塊元素左邊緣的左側。

首先，您需要position: relative對於.docs-test CSS規則添加position: relative .docs-test以相對於li父塊定位偽元素。

其次，添加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>