resizing li elements with CSS

Question

I have a list of results that I want to show the user, I looks like this:

Wins: 1 | 15 | 33 |

Lose: 7 | 65 | 100 |

Now the numbers are all in an unordered list and the design almost works fine. The problem is it may be likely that one of these numbers will go to three digits as show above (I want them to align with each other top and bottom).

So I try to resize the li element by using

#my_list li
{
    width: 100px; /*Exmaple width*/
}

This seems to do nothing so i looked around and found a lot of tutorials for nav bars. These show the resize in the <a> tag but i don't have any links for these numbers.

So my question is, is there a way of resizing the width of the li tag itself? If not is there an HTML5 tag that is semantically suitable to wrap these numbers in and then resize that element like you would the a tag for links?

Thanks for the help.

Answer 1

Used to display:inline-block or float:left

Try this css

#my_list li
{
    min-width: 100px; /*Exmaple width*/

}

or don't define width

#my_list li
{
padding:0 10px;
display:inline-block;
vertical-align:top;
 }