在div邊上顯示ul列表項目符號

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

The fiddle顯示我的問題和我想看到的。

如果這是不可能實現這個html結構，我會很高興聽到一些其他的建議。

2016-11-23 Simoroshka

你可以用絕對定位做到這一點，但我一般喜歡以避免定位，如果在所有可能的。

最終，我只是設置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>

來源

2016-11-23 08:43:53 Scott

由於我還沒有完全理解絕對/相對定位如何協同工作，我傾向於同意。這是一種非常直觀的方式，我將使用它，謝謝！ – Simoroshka

用於該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>

來源

2016-11-23 08:38:20

很榮幸爲您排憂解難！ :) –

我通常使用的CSS劈像下面沒有使用任何<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>

來源

2016-11-23 08:44:03 claudios

它與舊版瀏覽器兼容嗎？ – Simoroshka

@Simoroshka，訪問bootstrap瞭解更多關於瀏覽器兼容性的信息。這裏http://getbootstrap.com/getting-started/#support-ie-compatibility-modes – claudios

另外，自定義列表類型如何？ – Simoroshka

爲您添加float: left; css聲明。 :before選擇器在標籤的內容之前插入，而不是在標籤之前插入。 http://www.w3schools.com/cssref/sel_before.asp。如果您使用瀏覽器的開發人員工具檢查元素，則會在<li>標籤內看到「+」。

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

來源

2016-11-23 08:50:43 backpackcoder

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

我想更多地說明爲什麼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>

來源

2016-11-23 08:55:40

在div邊上顯示ul列表項目符號

回答

相關問題