Home/ Questions/Q 9230139
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:45:00+00:00

I’ve been searching about CSS lately, trying to teach myself the tricks. One another

  • 0

I’ve been searching about CSS lately, trying to teach myself the tricks.
One another issue I’ve encountered is directly related to the display: attribute.

I’ve been trying to get the width of the background element for my “menu buttons” as wide as the text they contain. The buttons are simply <div> elements.

When I use display:block; all of their width appear as wide as the longest item, and when I set it to display:inline; or display:inline-block they simply appear on the same line, just like how an inline element works.

Now, what I’m wondering is, how can I make them appear like a list, but still make the background color only as long as the text it contains?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want keep the format, have them wrap around the text and have a line for each item the inline-block or inline isn’t an option. You’ll have to use floats.

    You can force each element on a seperate line by floating your items “float:left;” and forcing the floated elements on other lines with clear:both;

    .item{
float:left;
clear:both;
}

    Here’s an example: http://jsfiddle.net/Bn9Qx/

    • 0