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

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>

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

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%非零但是太小而无法容纳文本来做到这一点(除非你的屏幕是10000像素宽).我缩小以适应第一个和最后一个单元格,这些单元格强制它们与父容器的左右边缘对齐.然后我通过添加.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/

脚注
我尝试了一些其他方法使用text-align: justify和inline-block,但CSS引擎不会像常规字一样处理内联块,因此不能证明一行内联块.

设置left-margin为百分比值将根据需要,在一些窗口的宽度和最右边的链接不太工作不会上的优势.

jQuery的方法已被尝试过,见:
该占用在CSS3微升整个宽度上均匀地间隔开的导航链接