I have a CSS problem I need help solving.

I have an `ul` for showing a column. I've hardcoded the width of this `ul` to 220px. Inside it, I have `li`'s. Each `li` has a text link.

Problem is, because I have hardcoded the `ul` width to 220px, the `li` are inheriting this, even though they don't need so much width. If I see the space each `li` text is taking, this is what I see:

![enter image description here](https://i.stack.imgur.com/IQf8l.png)

How can I make each `li` text ONLY take as much space as it needs for the text itself ?

I want to do this because I have a picture in the background which has a map on it .. The extra space taken by `li`'s means that the map isn't working in areas where it should work (because `li`'s are on top of the map) ..