Question

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

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

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

并且还使用

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

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

我需要nav是流动的，第一个和最后一个元素要与包含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>

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

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%来实现这一点，.tight非零但是太小而无法保存文本（除非你的屏幕宽10,000像素）。我缩小以适应第一个和最后一个单元格，这些单元格强制它们与父容器的左右边缘对齐。然后，我通过添加.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; }类强制每个其他表格单元缩小到适合。

剩余的桌子的单元格宽度为20％，这将使它们在两个最近的邻居之间保持均匀的间隔。但是，行中链接之间的间距会略有变化，这就是我称之为近似值的原因。

jQuery辅助解决方案

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

li

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

诀窍是计算魔术左边距值并将其应用于除第一个之外的所有$(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); }元素。

jQuery操作是：

ul.nav

基本上，操作会计算$ul_w（li）的宽度以及所有$li_w子元素（($ul_w - $li_w)/6）的总宽度。

左边距由.not(".first")计算，其中6是7个链接之间的间隙数。

代码的关键行是：$（“。nav.ex2 li”）。not（“。first”）。css（“margin-left”，li_margin）;

我使用li省略第一个.css元素，然后li来设置左边距。

一个轻微的缺陷位于最右边，链接不是很正确，但你可以通过将最后一个text-align: justify浮动到右边来解决这个问题。

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

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

<强>脚注
我尝试了使用inline-block和left-margin的其他一些方法，但CSS引擎不会像常规字一样处理内联块，因此不能证明一行内联块。

将{{1}}设置为％值在某些窗口宽度下不起作用，最右边的链接不会在边缘上。

以前尝试过jQuery方法，参见：
Evenly-spaced navigation links that take up entire width of ul in CSS3

Answer 2

您可以使用text-align: justify;并忽略最后左对齐的行。由于#last：http://jsfiddle.net/mwRbn/

，padding-left: 100%;不可见并占据最后一行

如果您想垂直对齐菜单文字，请将height与line-height结合使用：

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

http://jsfiddle.net/mwRbn/1/。你需要一个IE＆lt; 8 hack？

具有等距间距的不同宽度的流体导航物品

2 个答案: