How to create constant space BETWEEN li inline list items

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?

score 2 · Accepted Answer · answered Sep 22 '11 at 08:06

2

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.

answered Sep 22 '11 at 08:06

JHolyhead

984
4
8

Thanks for that. If the contents are subject to change, is there anyway of making this dynamic/flexible? – Alex Hadley Sep 22 '11 at 08:07
It does, though one follow up question. What if I want the total width (of the `ul)` to be constant, but the spacing to stay the same? – Alex Hadley Sep 22 '11 at 08:11
I'm not sure I get your meaning. The width of a ul will be the cumulative width of all of it's listItems (content + padding + margin). You might constrain the width by setting it inside a div, but then when it reaches the end of that width, it will likely wrap to the next line. Take a look at the menu bar at the top of the page (Questions - Tags - Users ...) - that's an inline div. If you have firebug/similar, you can play with that and see how such a list will behave as you change the value of the list items. – JHolyhead Sep 22 '11 at 08:18
That is sort of the reason for the question, sorry it wasn't clear. So it would only be doable by javascript if I wanted to have equal spacing for unknown width elements in a fixed width ul? – Alex Hadley Sep 22 '11 at 08:28
Try setting the width of the individual list items to the same value (width of ul/number of items) and set the text-align property to center. That might do it. – JHolyhead Sep 22 '11 at 08:34
the contents of the li are of different widths, so this would lead to differing spaces between, alas. Doesn't sound like this is doable with pure css. – Alex Hadley Sep 22 '11 at 08:36

Maxim Safioulline · Answer 2 · 2013-06-06T00:10:27.533

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:)

How to create constant space BETWEEN li inline list items

2 Answers2