html - Display block without 100% width

Question

I want to set a span element to appear below another element using the display property. I tried applying inline-block but without success, and figured I could use block if I somehow managed to avoid giving the element a width of 100% (I don't want the element to "stretch out"). Can this be done, or if not, what's good praxis for solving this kind of issue?

Example: a news list where I want to set a "read more" link at the end of each post (note: <a> instead of <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Update: Solved. In CSS, apply

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Answer 1

Use display: table.

This answer must be at least 30 characters; I entered 20, so here's a few more.