HTML，CSS - 樣式列表 - 最佳實踐

Question

我正在尋找HTML/CSS中的列表樣式，並且想知道最佳實踐是什麼。

<ul class="newsItems"> 
    <li> 
     <h5>July 16, 2012</h5> 
     <p>News - headline information</p> 
    </li> 
</ul> 

我需要顯示一個小圖標的報紙，與在H5文字和P一起到它的右邊沿，而這些都需要內嵌顯示（從左到右）。

最好是用含有H5/P元素的LI來做到這一點，還是有更好的方法來做到這一點，我不知道？

我的CSS目前看起來是這樣的： -

#News .newsItems { 
padding-left:10px; 
display:inline; 
} 

#News .newsItems li { 
list-style-image:url(/Images/NewspaperIcon.png);  
list-style-position:Inside; 
} 

#News .newsItems li { 
vertical-align:top; 
max-width:180px; 
} 

#News .newsItems li h5 { 
vertical-align:top; 
} 

#News .newsItems li p { 
vertical-align:top; 
} 

預期輸出的一個例子 -

Answer 1

試試這個

CSS

ul.newsItems{ 
margin:0; padding:0; 
} 
ul.newsItems li {  
    height:auto; 
    display:inline-block; 
    list-style:none; 
    padding-left:40px; max-width:180px; 
background: url('http://www.parker.edu/uploadedImages/1200_Newsletters/1214_Buttons/Newsletter-Icon.png') left top no-repeat; 
} 
.newsItems li span{ 
vertical-align:top; font-weight:bold; 
} 
.newsItems li p {margin:0; padding:0} 

DEMO