The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] List Styling – each li to get a different colour

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #170436

    Hi there,

    I’m having to style a slightly different than I’m used to list for a project this weekend and have no idea where to start.

    I have an image for each of the 26x26px colours but I need to get the text lining up as per the sample.

    Here is an example of the list:

    Any ideas on where I can get started?
    Should it even be an unordered list?

    Thanks for your time.


    Arguably yo could use a table here….but it depends on your particular requirements.

    You may have to use display:table-cell on the list anyway to get the alignment you are looking for so I’d say it’s 50/50.

    I’ll have a think but perhaps you could try it both ways and see which you prefer.


    Pardon me for being a little offtopic but why do you need those colored squares as images? For a web project they’ll look cooler made in css only.

    For your problem as far as my knowledge goes( I’m no expert at all) the Paulie_D solution is the one to go with, table cells. I also found this but it’s about aligning li’s horizontally not vertically. Maybe you can make something of it too.


    Thank you wolf! That is amazing.
    Where’s the buy you a beer button :-)


    I was thinking of images for backwards compatibility however the pen above seems to have it nailed.

    Thanks for the replies guys!


    Just a quick update. I got the project up but the boxes weren’t working in IE8.
    Here is a pen with the updated code which is working in IE8.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.