Search code examples
htmlcsswidth

Display block without 100% width

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;
}
Solution

  • If I'm understanding your question properly, the following CSS will float your a below the spans and keep it from having a 100% width:

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