How to make an inline element appear on new line, or block element not occupy the whole line?

Question

I can't figure out how to do this with CSS. If I just use a <br> tag, it works flawlessly, but I'm trying to avoid doing that for obvious reasons.

Basically, I just want the .feature_desc span to start on a new line, but:

• If I make it an inline element, it won't have a line-break.
• If I make it a block element, it will expand to fit the entire line, putting each of these icons on its own line, and wasting tons of space on the screen (each .feature_wrapper will be a slightly different size, but none will ever be as wide as the entire screen.)

Example code: This works, but uses a br tag:

<li class='feature_wrapper' id='feature_icon_getstart'>      <span style='display: none;' class='search_keywords'>started</span>      <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span><br/>     <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span>  </li> 

I want to style this with CSS to achieve the same result:

<li class='feature_wrapper' id='feature_icon_getstart'>      <span style='display: none;' class='search_keywords'>started</span>      <span class='feature_icon spriteicon_img' id='icon-getstart'><a href='getstarted/index.html' class='overlay_link'></a></span>     <span class='feature_desc'><a href='getstarted/index.html' >Getting Started Wizard</a></span>  </li> 

Any ideas? Or am I going about this the wrong way?

Answer 1

You can give it a property display block; so it will behave like a div and have its own line

CSS:

.feature_desc {    display: block;    .... } 

Answer 2

Even though the question is quite fuzzy and the HTML snippet is quite limited, I suppose

.feature_desc {     display: block; } .feature_desc:before {     content: "";     display: block; } 

might give you want you want to achieve without the <br/> element. Though it would help to see your CSS applied to these elements.

NOTE. The example above doesn't work in IE7 though.