在div的一側顯示ul列表項目符號

Question

我有一個div列表，每個元素內都有段落。 我想將它視為無序列表，並在每個div的左側顯示一個自定義項目符號。 但是，我得到了div之上的子彈。

小提琴顯示了我的問題以及我希望看到的內容。

如果用這個html結構無法實現這一點，我會很高興聽到其他一些建議。

Answer 1

使用position:absolute的：

 ul { width: 300px; list-style: none; padding:0; } li { margin:0 0 40px; padding-left: 30px; position:relative; } li:before { content: "+"; padding-right: 30px; display:inline-block; position:absolute; left:0; } 

 <ul> <li> <div> <p>This is out of place</p> <span>some other thing that wants to be here</span> </div> </li> <li>This works as intended some other thing that wants to be here</li> </ul> 

Answer 2

你可以用絕對定位來做到這一點，但我通常更願意盡量避免定位。

最后，我只是將div設置為與直線li標簽相同的縮進，然后浮動+。

 ul { width: 300px; list-style: none; } li { margin: 40px; padding-left: 0px; } li > div { margin-left: 40px;} li:before { content: "+"; display: block; float: left; padding-right: 30px; } 

  <ul> <li> <div> <p>This is out of place</p> <span>some other thing that wants to be here</span> </div> </li> <li>This works as intended</li> </ul> 

Answer 3

我通常使用下面的css hack而不使用任何<ul>或<ol>只有div：

display: list-item;
list-style-type: circle; 

 div.list-div { display: list-item; margin-left: 1.3em; list-style-type: circle; background: #ccc; } 

 <div class="list-div"> <p>This is out of place</p> <span>some other thing that wants to be here</span> </div> <div class="list-div"> <p>This is out of place</p> <span>some other thing that wants to be here</span> </div> 

Answer 4

添加一個float: left; 你li:before css宣言li:before 。 :before選擇器在標記內容:before插入，而不是在標記之前。 http://www.w3schools.com/cssref/sel_before.asp 。 如果使用瀏覽器的開發人員工具檢查元素，則會在<li>標記內看到“+”。

li:before {
  content: "+";
  padding-right: 30px;
  float: left;
}

Answer 5

我同意Scott的觀點，浮動是一個更好的選擇，其他方法傾向於打破布局與定位。

我想更多地說明為什么li:before將它放在上面，這是因為從技術上來說，你想要它，在你的情況下，在段落之前，所以p:before工作如下所示。

 ul { width: 600px; list-style: none; } li { margin: 0px; padding-left: 0px; } li > div { margin-left: 0px;} p:before { content: "+"; margin-left: -18px; padding-right: 10px; } 

  <ul> <li> <div> <p>I am a paragraph</p> <span>That is why p:before works and not li:before</span> </div> </li> <li>This works as intended</li> </ul>