如何在li内联列表项之间创建恒定空间

Question

I want to use a list for horizontal links. I understand I need to use display: block for the ul and display: inline for the li.

There are a number of questions for getting constant width for the li elements, but I want constant space between them, they contain text of different width themselves.

Thanks.

I think my question was unclear:

I am looking to have a fixed width ul with unknown width li elements and want to have constant space between them, not constant width li elements. Is this only achievable with javascript?

Answer 1

Use the margin css property. If they all have the same margin, then the distances between the content of the adjacent <li>s will be the same.

You might want to take a look at the Box Model

Edit to address comment below: If you want the gaps between the items to stay the same regardless of the content, margin should do the job. If you want the position of the items to stay the same regardless of the content (and so the gaps between them will change), you need to set the width of the item.

Answer 2

I'd like to offer my solution to this: http://jsfiddle.net/connectedcat/bZpaG/1/

JQuery excerpt:

$(document).ready(function(){
    var nav_width = 0;
    $('nav li').each(function(){
        nav_width += $(this).width();
    });

    var for_each = ($('nav ul').width() - nav_width)/($('nav li').length - 1);
    $('nav li').each(function(){
        $('nav li').css('margin-right', for_each);
    });

    $('nav li:last-child').css('margin-right', 0);
});

As far as I have figured out there is no way to do it purely in css, js is required to figure out the distances for the truly fluid layout. One conundrum that still bugs me in relation to this issue is the fact that different browsers render fonts slightly differently (as in a certain word rendered in Safari may take up 48px, while in Firefox - 49px.) I put in some css to account for this, but it results in some stray pixels. If anybody knows how to make it super neat and clean across all platforms - I would appreciate some schooling:)