2

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

我使用以下技术的成功有限：

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

并且还使用

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

但是我写的代码似乎完全不能很好地处理不同宽度的元素。随着导航的大小调整，间距似乎不保持相等。

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

4

2 回答 2

5

我想了一会儿，想出了两种合理的方法，这两种方法都很好，但并不完全是像素完美的。一种仅基于 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>

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

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: tableand width: 100%。子li元素是table-cell's。我添加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 动作是：

$(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到右边来解决这个问题。

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

小提琴：http: //jsfiddle.net/audetwebdesign/xhSfs/

脚注我使用and
尝试了其他一些方法，但是 CSS 引擎不会将内联块视为常规单词，因此不会证明一行内联块的合理性。 text-align: justifyinline-block

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

之前已经尝试过 jQuery 方法，请参阅：
Evenly-spaced navigation links that takes entire width of ul in CSS3

于 2013-05-12T17:01:34.813 回答
4

您可以使用text-align: justify;和忽略最后一个左对齐行。#last是不可见的并占据最后一行，因为：http padding-left: 100%;: //jsfiddle.net/mwRbn/

如果要垂直对齐菜单的文本，请height结合使用line-height：

ul#nav { 
  text-align: justify;
  width: 100%;
  background: yellow;
  height: 2em;
  line-height: 2em;
}

http://jsfiddle.net/mwRbn/1/。你需要一个 IE<8 hack 吗？

于 2013-05-12T17:35:22.057 回答