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 hide crossed-out CSS lines on firebug?

    How to make width of element full width of screen and not parent css

    How would I make this into an dynamic :nth-child css selector [duplicate]

    Yahoo news CSS, how to achieve behavior

    How to disable external css stylesheet - Newbie

    How to proportionally fit a variable number fieldsets inside a parent div

    How to emulate Google greyed-out suggested text in input element?

    How to prevent bootstrap css class to override my custom css class

    How to underline gaps created with CSS columns property?

    How to use selenium IDE to find/check if a div object has children?

    How can I float divs so that they expand past their container?

    how to load different css files with different screen sizes?

    How to align two images in html/css

    How to create a horizontal calendar with nested lists?

    How to create css code that works for all browser?

    How to set url of fonts in css file into mvc project?

    How to re-animate CSS3 animations on class change

    How to program the navigation bar(image) web html

    How to create this image using CSS?

    How to make menu bar with nested submenu css

    How to apply last-child only for first nested li?

    How to do expand and collapse for table column in html file?

    How do I float a
  • to the right in CSS?
  • How to make a webpage look like a popup? [closed]

    How to move hamburger menu to the front of overlay menu

    How can I use bootstrap in css file?

    How do I vertical center text next to an image in html/css?

    How can I get my text to hug around the top of my image?

    How do I make the mobile view of my website not show certain elements?

    How to handle this CSS issue with Wordpress?