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