How to do like this list using <li> and CSS?
i want to make an stylized unordered list like the following, but i don't want it to be completely divs, i want to 开发者_如何学编程use the <li>
& <ul>
tags and maybe a div if it's necessary.
Any sample code to make like this ?
Thanks
To me, this looks like:
<ul class="rated-list">
<li>
<span class="rating">1086</span>
<a href="/foo.html">Why Don't …</a>
</li>
</ul>
You can then use CSS to give the span
and a
fixed widths and float them left.
Alternatively, you could make only the span
fixed-and-floated and give the link a margin-left
equal to the span
's width, plus whatever padding you want. Come to think of it, that's probably a better solution! :-)
Ben's markup for the list looks similiar to what i would put together. I've used his markup and provided a some CSS file to get something similiar to your screenshot:
Markup:
<ul class="rated-list">
<li>
<span class="rating">1086</span>
<a href="/foo.html">Why Don't…</a>
</li>
<li>
<span class="rating">1087</span>
<a href="/foo.html">We try...</a>
</li>
<li>
<span class="rating">1088</span>
<a href="/foo.html">A little...</a>
</li>
<li>
<span class="rating">1089</span>
<a href="/foo.html">CSS?</a>
</li>
</ul>
CSS:
body
{
color:#958C51;
font-family:arial,helvetica,sans-serif;
font-size:83%;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
ul.rated-list
{
list-style:none;
width:300px;
border-top:solid 1px #DDD;
margin:0;
padding:0;
}
ul.rated-list li
{
list-style:none;
padding:5px 0px;
border-bottom:solid 1px #DDD;
vertical-align:top;
}
span.rating
{
background:Transparent url('http://cotnet.diggstatic.com/img/shade-news.gif') no-repeat top left;
display:inline-block;
padding:15px 10px;
width:32px;
height:22px;
font-weight:bold;
}
ul.rated-list li a
{
width:240px;
text-decoration:none;
display:inline-block;
color:#517197;
}
I've also set a little initial body style and decided to draw the DIGG span background image for simplicity. You'd obviously just reference a local web site file in production.
Hope it helps some people out. :-)
精彩评论