css - create a block element whose width is only as large as the text contained within

Question

I have this fiddle where there is a rollover style applied to a paragraph - but I want that paragraph to only be as wide as the text contained within (not the entire width of the containing element). If I do display:inline-block it brings each menu option up to the same line but sets the width of each item appropriately. How do I combine both (options on separate lines, but only as wide as the text contained inside)?

http://jsfiddle.net/heaversm/wxqeW/

Answer 1

You could also have the background color change when you hover the entire <p> Fiddle: http://jsfiddle.net/wxqeW/11/

Answer 2

Try applying a

width: auto;

to the css. Also check that the divs are not floating.

Answer 3

You could add a span and set the hover state to the span

Fiddle ------> HERE