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


Tags: html,css

Problem :

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?



Solution :

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

    CSS Howto..

    How to select every 4th div inside another div CSS Selector [closed]

    How can I include a HTML-encoded “content:” character in CSS? [duplicate]

    How do we write a CSS “block-level-style” within an inline style attribute tag?

    First and Second touch of a button, how to show images at different times?

    How to set Twitter Bootstrap class=error based on AngularJS input class=ng-invalid?

    How to get my app to fill the full height on mobile?

    How to vertically center more than one line of text (works only on chrome)?

    How to separate form with horizontal line

    HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

    How to show inline help using simple css and jquery

    How to route requests in codeigniter so we can serve static css, js and img files?

    How to change CSS in media tag within @media only tags with jquery?

    Can User-Agent affect how CSS is rendered on a page?

    html css - how to create multiple column list?

    How to get a background image to print using css?

    CSS how to get floated left text to wrap?

    How do I customize