如何模擬HTML無序列表行爲？

我正在做一個待辦事項清單webapp，我正在使用Raphael SVG圖標作爲列表項旁邊的複選標記和狀態圖標。如何模擬HTML無序列表行爲？

據我所知，這意味着我不能使用標準的無序列表項目符號處理。

下面是我在用的列表項：

<li class='list-item'><span class='item-status'></span> <span class='item'>List Item 2</span></li>

我插入item-status跨類使用Javascript（拉斐爾）內的複選標記圖標。

，這裏是我的CSS

ul { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
} 
ul li { 
    padding-left: 14px; 
} 
span.item-status { 
    display: inline-block; 
    vertical-align: top; 
    margin-top: -5px; 
    cursor: pointer; 
} 
span.item { 
    vertical-align: top; 
}

那很好，如果「列表項」小於一行，但如果超過一行它，使它看起來像這樣： enter image description here

，我希望它看起來更像這個（樣機）：

enter image description here

TL; DR：我希望它看起來像第二張照片，而不是第一張。

來源

2013-05-30 Josh Sherick

也使.item內聯塊。你也可以漂浮他們。 – dandavis

你有沒有考慮過使用[圖標字體]（http://css-tricks.com/examples/IconFont/）？ –

如果有人能讓我知道我爲什麼被低估，我將不勝感激。 @Web_Designer我的確考慮過使用字體，但是在能夠用它替換子彈方面沒有什麼區別，是嗎？另外，Raphael允許更多的自定義功能，並且有很多內置動畫功能的酷炫功能。我計劃使用多個圖標（而不僅僅是複選標記）。 –

這看起來像是沿着這些線路的東西對我說：

<style> 
ul { 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
} 

ul li { 
    padding-left: 14px; 

} 

span.item { width: 7em; } 

span.item-status, span.item { 
    display: inline-block; 
    vertical-align: top; 
    margin-top: -5px; 
    cursor: pointer; 
} 

</style> 

<ul> 
    <li class='list-item'><span class='item-status'>*</span> 
     <span class='item'>List Item 2 List Item 2 List Item 2 List Item 2 </span></li> 
    <li class='list-item'><span class='item-status'>*</span> 
     <span class='item'>List Item 3 List Item 3 List Item 3 List Item 3 </span></li> 
</ul>

來源

2013-05-30 00:46:49 dandavis

不是我正在尋找的，因爲它使最大寬度7em，但它讓我正確的軌道，它確實對齊文本，所以謝謝，我將它標記爲正確的答案，因爲**設置寬度爲'。項目'是我需要做的，以使其正確對齊。**謝謝！ –

由於這是結構上的表格數據，一個table元素是最自然的解決方案。它也是最強大的，因爲它的工作原理，即使CSS被禁用：

<table> 
<caption>List Title</caption> 
<tr valign=top><td>✓<td>List Item Lorem Ipsum Dolor Sit Amet This is a 
pretty long to do people really shouldn’t make 
them this long 
<tr valign=top><td>✓<td>List Item 2 
</table>

您可以使用CSS做出的排行榜冠軍出現在大尺寸和大膽

爲了簡單起見，我已經使用了CHECK MARK字符。通過使用圖標字體技巧替換它不會影響所提出的問題。（但我會使用一個簡單的圖像，而不是這樣的把戲。）

來源

2013-05-30 06:17:49

如何模擬HTML無序列表行爲？

回答

相關問題