Question

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

为ul元素获取恒定宽度有很多问题，但我想在之间保持恒定的空间，它们本身包含不同宽度的文本。

感谢。

我认为我的问题不明确：

我希望固定宽度li具有未知宽度li元素，并希望它们之间有恒定的空间，而不是常量宽度{{1}}元素。这只能通过javascript实现吗？

Answer 1

使用margin css属性。如果它们都具有相同的边距，则相邻<li>s的内容之间的距离将相同。

您可能需要查看Box Model

编辑以解决以下评论： 如果您希望项目之间的差距保持不变，无论内容如何，保证金都应该完成。如果您希望项目的位置保持不变，无论内容如何（因此它们之间的间隙会发生变化），您需要设置项目的宽度。

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中呈现的某个单词可能占用48px，而在Firefox中则为49px。）我放入一些css来解释这，但它会导致一些杂散像素。如果有人知道如何让它在所有平台上超级干净整洁 - 我会很感激一些学校教育：）

如何创建常量空间BETWEEN li内联列表项

2 个答案: