處理內部列表項的段落用自定義CSS內容

這是一個段落怎麼看起來像一個非樣式列表項（<li>）內：處理內部列表項的段落用自定義CSS內容

<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。

我該如何使自定義CSS內容列表樣式類型的列表項中的段落不會跳轉到下一個「行」的開頭？目標是讓這些自定義列表樣式列表以與沒有樣式的常規列表相同的方式處理段落。

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

來源

2017-08-02 David Gomes

所以，你需要把子彈p標籤裏面的每一個字？ –

@HemaNandagopal不，我只希望整個段落*不*跳躍，就好像在它之前有一個'
'標籤。基本上我希望它看起來像第一個圖像。我可以通過對列表項目使用'display：inline'來輕鬆地複製第一個圖像，但是它不適用於多個段落。 –

明白了。好，我的系統不支持img文件。你已經在js demo中使用了span，但是在這裏你使用了p標籤嗎？ –

這裏是實現你想要的造型的一種方式。

使用絕對定位將生成的內容從::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: '\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>

來源

2017-08-02 14:03:41

處理內部列表項的段落用自定義CSS內容

回答

相關問題