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  lt br gt  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    lt li class  feature wrapper  id  feature icon getstart  gt        lt span style  display  none   class  search keywords  gt started lt  span gt        lt span class  feature icon spriteicon img  id  icon-getstart  gt  lt a href  getstarted index html  class  overlay link  gt  lt  a gt  lt  span gt  lt br  gt       lt span class  feature desc  gt  lt a href  getstarted index html   gt Getting Started Wizard lt  a gt  lt  span gt    lt  li gt    I want to style this with CSS to achieve the same result    lt li class  feature wrapper  id  feature icon getstart  gt        lt span style  display  none   class  search keywords  gt started lt  span gt        lt span class  feature icon spriteicon img  id  icon-getstart  gt  lt a href  getstarted index html  class  overlay link  gt  lt  a gt  lt  span gt       lt span class  feature desc  gt  lt a href  getstarted index html   gt Getting Started Wizard lt  a gt  lt  span gt    lt  li gt    Any ideas  Or am I going about this the wrong way

User · Accepted Answer

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

User · Answer

span  before   content   quot  A quot   white-space  pre

User · Answer

For the block element not occupy the whole line  set it s width to something small and the white-space nowrap  label       width 10px      display block      white-space nowrap

User · Answer

I think floats may work best for you here  if you dont want the element to occupy the whole line  float it left should work     feature wrapper span       float  left      clear  left      display inline     EDIT  now browsers have better support you can make use of the do inline-block    feature wrapper span       display inline-block       display inline   zoom 1      Depending on the text-align this will appear as through its inline while also acting like a block element

User · Answer

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  lt br  gt  element  Though it would help to see your CSS applied to these elements   NOTE  The example above doesn t work in IE7 though

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

Examples related to html

Examples related to css