How to create constant space BETWEEN li inline list items
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 hav开发者_如何学Goe 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?
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.
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:)
精彩评论