Reputation: 134
I am looking to style a list in HTML / CSS, and wondering what best practices are.
<ul class="newsItems">
<li>
<h5>July 16, 2012</h5>
<p>News - headline information</p>
</li>
</ul>
I need to display a small newspaper icon, along with the text in the H5 and the P alongside to the right of it, and these need to be displayed inline (left to right).
Is it best to do this with an LI containing the H5 / P elements, or is there a much better way of doing this that I don't know about?
My CSS currently looks something like this :-
#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;
}
An example of the intended output -
Upvotes: 1
Views: 1139
Reputation: 26979
Try this
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}
Upvotes: 2