有序列表與每個列表項右側的圖像

我想創建一個有序列表，每個列表項左側有幾個圖標。我想的佈局，看起來像這樣有序列表與每個列表項右側的圖像

<image1><image2> 1. Lorem Ipsum 
<image2><image2> 2. Lorem Ipsum 
<image3><image2> 3. Lorem Ipsum

我可以很容易地把圖像以列表項文本的權利，但我似乎無法得到它在有序排列對每個號碼的左名單。

來源

2013-05-20 Lukas Halim

給我們您的代碼，以便我們可以看到您在做什麼錯誤 –

提供包含您的HTML和CSS的代碼的jsfiddle。 – Nitesh

這是Updated Solution。

的HTML：

<ol class="img"> 
    <li>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
    <li>Lorem Ipsum</li> 
</ol>

的CSS：

ol.img li{background: url("http://www.siguccs.org/Conference/Fall2007/images/icon_bullet.gif") no-repeat scroll 1px 5px transparent; 
    list-style-position: inside; 
    padding-left: 16px;}

來源

2013-05-20 13:14:10 Nitesh

你有'img'元素直接在你的'ol'內......'ol'允許的內容是_zero或更多'li' elements_：http://www.w3.org/TR/html-markup/ol。 html – canon

oops。對不起，我很着急。我已更新我的解決方案 - @canon – Nitesh

我希望您對解決方案感到滿意 - @LukasH – Nitesh

的解決方案很簡單，它應該是這樣的：

<ol> 
<table> 
<tr> 
<td><image1 /></td> 
<td><li>Lorem Ipsum</li></td> 
</tr> 
<tr> 
<td><image2 /></td> 
<td><li>Lorem Ipsum</li></td> 
</tr> 
<tr> 
<td><image1 /></td> 
<td><li>Lorem Ipsum</li></td> 
</tr> 
</table> 
</ol>

我沒有尚未測試過，我剛寫的代碼直接這裏，所以給它一個嘗試...

該解決方案基本上把每個圖像和一個文本排成一排......

來源

2013-05-20 13:00:54 Nathan

與A液：在之前的CSS僞元素：

li { 
    position: relative; 
} 
li:before { 
    content: ""; 
    width: 15px; 
    height: 15px; 
    position: absolute; 
    left: -40px; 
    background: url(http://www.hadley.edu/images/RightTriangleIcon.png); 
    background-size: contain; 
}

http://jsfiddle.net/poselab/Qcejy/

來源

2013-05-20 13:28:55 PoseLab

有序列表與每個列表項右側的圖像

回答

相關問題