css - 具有等距间距的不同宽度的流体导航项

Question

我想创建一个流畅的水平导航链接列表，其中导航链接均匀分布，并占据封闭容器的整个宽度。 导航链接的宽度各不相同。第一个链接应左对齐，最后一个链接应右对齐。

我使用以下技术取得的成功有限:

ul {display: table;width: 100%;}
li {display: table-cell;}
a {display: block;} 

还使用了

ul {text-align: justify}
li {inline-block }

但我编写的代码似乎都无法很好地处理不同宽度的元素。调整导航大小时，间距似乎不相等。

我需要导航是流畅的，第一个和最后一个元素与包含 ul 的边缘齐平，并且元素彼此等距

Answer 1

我考虑了一会儿，想出了两种合理的方法，这两种方法都不错，但像素并不完美。一种是仅基于 CSS，另一种是借助 jQuery (JavaScript)。

CSS 方法 - 相当不错的近似

考虑以下 HTML:

<ul class="nav ex1">
    <li class="first"><a href="#">Home</a></li>
    <li><a href="#">Collections</a></li>
    <li class="tight"><a href="#">About Us</a></li>
    <li><a href="#">Slocklists</a></li>
    <li class="tight"><a href="#">Trade Enquiries</a></li>
    <li><a href="#">Press</a></li>
    <li class="last"><a href="#">Contact Us</a></li>
</ul>

我添加了一些类作为样式的 Hook 。

CSS如下:

.nav.ex1 {
    outline: 1px dashed blue;
    width: 100%;
    margin: 0;
    padding: 0;
    display: table;
}
.nav.ex1 li {
    display: table-cell;
    outline: 1px dotted gray;
    width: 20%;
    white-space: pre;
    text-align: center;
}
.nav.ex1 li.first {
    width: 1%;
}
.nav.ex1 li.last {
    width: 1%;
}
.nav.ex1 li.tight {
    width: 1%;
}

在示例 1 中，ul.nav 父容器使用 display: table 和 width: 100%。子 li 元素是 table-cell 的。我添加了 white-space: pre 以防止某些链接换行成两行，并添加了 text-align: center 以保持文本居中。

诀窍是强制某些表格单元格缩小以适合文本，您可以通过设置 width: 1% 来做到这一点，该值非零但太小以至于按住文本(除非你的屏幕是 10,000 像素宽)。我收缩以适应第一个和最后一个单元格，这迫使它们与父容器的左右边缘对齐。然后，我通过添加 .tight 类强制所有其他表格单元格缩小以适合。

其余表格的单元格将具有 20% 的宽度，这将使它们在最近的两个相邻单元格之间保持均匀间隔。但是，行中链接之间的间距会有一些细微的变化，这就是为什么我称之为近似值。

jQuery 辅助解决方案

在示例 2 中，标记基本相同，CSS 为:

.nav.ex2 {
    outline: 1px dashed blue;;
    margin: 0;
    padding: 0;
    display: block;
    overflow: auto;
    width: 100%;
}
.nav.ex2 li {
    float: left;
    display: block;
    outline: 1px dotted gray;
    width: auto;
}

在这种情况下，li 元素向左浮动，我使用 width: auto。

诀窍是计算神奇的左边距值并将其应用于除第一个元素之外的所有 li 元素。

jQuery Action 是:

$(window).resize(function () {
    navResizer();
});

// On load, initially, make sure to set the size.
navResizer();

function navResizer() {
    var $li_w = 0;
    var $ul_w = $(".nav.ex2").innerWidth();

    $( ".nav.ex2 li" ).each(function( index ) {
        $li_w += $(this).innerWidth();
    });

    var li_margin = Math.floor(($ul_w-$li_w)/6);
    $(".nav.ex2 li").not(".first").css("margin-left",li_margin);
    $("p.note").text( "Widths: ul.nav: " + $ul_w + " all li: " + $li_w + " Left margin: " + li_margin);
}

基本上，该操作会计算ul.nav ($ul_w) 的宽度，以及所有li 子元素的总宽度($li_w).

左边距由 ($ul_w - $li_w)/6 计算，其中 6 是 7 个链接之间的间隙数。

关键的一行代码是:$(".nav.ex2 li").not(".first").css("margin-left",li_margin);

我使用 .not(".first") 省略第一个 li 元素，然后使用 .css 设置左边距。

一个轻微的缺陷是在最右边，链接不是完全正确对齐的，但是你可以通过将最后一个 li float 到右边来解决这个问题。

在大多数情况下，如果您的链接文本长度相似，您将很难区分两者。这两种方法都不是像素完美的，但都很好。

fiddle :http://jsfiddle.net/audetwebdesign/xhSfs/

脚注
我尝试了一些使用 text-align: justify 和 inline-block 的其他方法，但 CSS 引擎不会像处理常规单词一样处理内联 block ，因此不会对齐一行行内 block 。

将 left-margin 设置为 % 值在某些窗口宽度下将无法正常工作，并且最右侧的链接将不会按要求位于边缘。

之前尝试过jQuery的方式，见:
Evenly-spaced navigation links that take up entire width of ul in CSS3