Grow your CSS skills. Land your dream job.

Are there a way to display OL with numbers horizontally?

  • # January 6, 2009 at 7:24 am

    Are there a way to display via CSS a horizontal ordered list without miss the order numbers?

    Code:
    1. Link
    2. Link
    3. Link
    4. Link

    I need to show like this :
    1. Link 2. Link 3. Link 4. Link

    Remember i need this on IE6 too.

    # January 6, 2009 at 7:44 am

    To the best of my knowledge you would style in much the same way you do with typical horizontal ul menus/navs

    Instead of using

    Code:
    list-style-type: none

    You would use the following for styling:

    Code:
    #nav li {
    display: inline;
    list-style-type: decimal;
    padding-right: 10px;
    }

    Your markup would read something like this:

    Code:

    Hope that helps

    # January 6, 2009 at 8:13 am

    No it’s not working .Numbering not showing in any browser.

    # January 6, 2009 at 1:05 pm
    "jitendra" wrote:
    No it’s not working .Numbering not showing in any browser.

    did you find anything on google?

    all the code I tried could not get what you wanted.

    unless you write in the numbers yourself

    # January 6, 2009 at 7:41 pm

    Didn’t have time to figure out why not having a "width" makes it break a bit, but here ya go:

    Code:

    1. Coffee
    2. Tea
    3. Coca Cola

    I’ll give it another look when I get home.

    # January 6, 2009 at 8:33 pm

    Give it a margin, e.g. using TheDoc’s example:

    Code:
    1. Coffee
    2. Tea
    3. Coca Cola
    # January 8, 2009 at 2:51 am

    ZIt’s workinf in firefox but not in IE

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".