How to make a block element adjust to the size of what is inside it?


Tags: html,css

Problem :

If I have this HTML:

<li class="name">hi</li>
<li class="name">hello</li>
<li class="name">wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!</li> 

And this CSS:

li.name{
    border: 1px solid #A38870;
    background-color: #FA682D;
    list-style: none;
    margin: 15px;
    padding: 5px;
}

The background extends all the way across the page like this.

How can I make the background adjust to the size of the text like this (without explicitly setting the width for each list element)?



Solution :

 display: table;

add this css code in li.name css class.


    CSS Howto..

    How can I position a web page in the middle of the screen?

    How to wrap a DIV around a DIV with CSS

    jQuery select- How to change the css style select?

    how to set equal font size in table cells for mobile device html pages

    How may I stack multiple html/css buttons vertically along the center of the page?

    html-css-how to make opeanable vertical menu [closed]

    How to use CSS 3D to display child elements perpendicular to parent element?

    How to keep Fixed position navigation static positioned when resizing window

    Slideshow using Jquery, images do not fit window

    JQuery show delete button on appended div

    How can I center an image with text that follows it using CSS?

    How to animate an image as it grows from the width of a container to the full viewport width?

    CSS IE7 How can I force UL inside LI to be wider than the parent

    How to prevent the style added to anchors from footer in JQueryMobile?

    Show HTML text if window width is too small with CSS

    I have a div with a pseudo :after element creating a circle after it. How can I add something else inside that circle?

    how to prevent link padding during hover from extending paragraph padding

    How to change MenuItem focus/hover color

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?

    how to select last element in the page?

    How to display a division over other element

    How do I make punch-through transparent text in HTML/CSS?

    How to align text and image in a CSS box?

    How to move a CSS class below another? [closed]

    How did he get the sidebar to remain on the left, even as the right side of the page can scroll?

    How to make a shape which is made using css borders responsive?

    How to center a banner and keep margin?

    How to create a 1px height div in IE8

    Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

    How do I align something in a in the top-left corner - without aligning everything?