CSS Li background width

Am using the follow css for my li items.

div.categories li.selected
{
    background-color:#d6d6d6;
    white-space: nowrap;
    list-style-type: square;
    padding-right: 5px;
    padding-left: 5px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    white-space: nowrap;
    line-height: 20px;
    width: 50px;
}

The problem is the width of the content in the li items keeps changing bu开发者_如何学编程t I can't change the width of the background according to the content of the li. And if I keep the width fixed the problem appears as below otherwise if I don't keep a fixed width the background stretches till the end.

---

Its hard to tell without seeing the elements around your code, but it appears to me that the containing UL or the div.categories has a width set, and some of the LI's are breaking that width because of their content's length. By default, LI's will stretch to whatever width they need and theri background color will fill the entire space, regardless of how wide it is.

Try taking off whatever contraints you have on the width of the UL or div.container or whatever above that is locking the UL in place.

---

Not sure but does display:block on the LI (or the span in the LI) help with what you're looking for?