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

Question

我想使用水平链接列表。我知道我需要对 ul 使用 display: block ，对 li 使用 display: inline 。

要获得 li 元素的恒定宽度有很多问题，但我想要它们之间的恒定空间，它们本身包含不同宽度的文本。

谢谢。

我认为我的问题不清楚：

我希望有一个固定宽度的 ul 和未知宽度的 li 元素，并希望它们之间有恒定的空间，而不是恒定宽度的 li 元素。这只能用javascript实现吗？

Answer 1

使用 margin css 属性。如果它们都具有相同的边距，则相邻

s 的内容之间的距离将相同。

您可能想看看 盒子模型

编辑地址评论如下：
如果您希望无论内容如何，​​项目之间的间隙都保持不变，则边距应该可以做到这一点。如果您希望项目的位置保持不变，而不管内容如何（因此它们之间的间隙将会改变），则需要设置项目的宽度。

Answer 2

我想提供我的解决方案：
http://jsfiddle.net/connectedcat/bZpaG/1/

JQuery 摘录：

$(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);
});

据我发现没有办法纯粹用 css 来做到这一点，需要 js 来计算出真正流畅布局的距离。
与此问题相关的一个难题仍然困扰着我，那就是不同的浏览器呈现的字体略有不同（例如在 Safari 中呈现的某个单词可能占用 48 像素，而在 Firefox 中则为 49 像素。）我放入了一些 css 来解释但这会导致一些杂散像素。如果有人知道如何使其在所有平台上变得超级整洁和干净 - 我将不胜感激一些教育:)