CODEWITHSUNDEEP
csshtmlhtml-lists
ragebunny
ragebunny

Reputation: 1760

resizing li elements with CSS

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.

Upvotes: 3

Views: 5759

Answers (3)

Matanya
Matanya

Reputation: 6346

What you are describing is a classic case which requires a TABLE, NOT UL. By using a table you ensure perfect alignment no matter how many digits there are, as the cells automatically expand to contain the content.

EDIT:As for inconsistent no. of TD's in each TR, Look at this simple fiddle where you can see how flexible tables are even when the no. of TD's for each row is different. Moreover,You can easily fix such inconsistencies with the COLSPAN HTML attribute. That is, you find out which row has most TD's and this will be your total column number. Then you just calculate the ((TOTAL - ACTUAL) +1), and pass this value as the last TD's COLSPAN.

Upvotes: 2

aspirinemaga
aspirinemaga

Reputation: 3937

U should put it into display:inline-block and set a width for it,

here is a live example: DEMO LINK

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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;
 }

Upvotes: 2

Related Questions