Getting UL border to wrap only around text

Question

I have a UL that I'm using for a menue of styled. Unfortunately, when I try to add a boarder it goes across the whole screen because they are li elements (and are display: block). I also don't want to define a fixed width for the elements, and instead want the width to be the width necessary for the text.

JsFiddle: http://jsfiddle.net/5xu6t/

Answer 1

Would require adding extra tag into your html but it seems to do what you want.

<li><span>Test</span></li>

And bodge the css a bit too.

http://jsfiddle.net/BVYM7/

Answer 2

Try:

<li><span>Test</span></li>

span{
    border: solid 1px red;
}