Css 等间距不同宽度的流体导航项_Css

Css 等间距不同宽度的流体导航项

css

Css 等间距不同宽度的流体导航项,css,Css,我想创建一个链接的流体水平导航列表，其中导航链接间隔均匀，占据了封闭容器的整个宽度导航链路的宽度都不同。第一个链路应左对齐，最后一个链路应右对齐我在使用以下技术方面取得了有限的成功： ul {display: table;width: 100%;} li {display: table-cell;} a {display: block;} 而且还使用 ul {text-align: justify} li {inline-block } 但我写的代码似乎都不能很好地处理不同宽度的元素。调

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

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

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

而且还使用

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

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

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

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

在示例1中，

ul.nav

父容器使用

display:table

和

width:100%

。子

li

元素是

表单元格

。我添加了

whitespace:pre

以防止某些链接被包装成两行，并添加了

text align:center

以保持文本居中

诀窍是强制一些表格单元格收缩以适应文本，您可以通过设置

宽度：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\u w

）的宽度，以及所有

li

子元素（

$li\u w

）的总宽度

左边距由

（$ul_w-$li_w）/6计算，其中6是7个链接之间的间隙数
代码的关键行是：$（“.nav.ex2 li”）.not（“.first”）.css（“左边距”，左边距）
我使用.not（“.first”）
省略第一个li
元素，然后使用.css
设置左边距
一个轻微的缺陷是在最右边的链接不正确的情况下，但是您可以通过将最后的<代码> LI>代码>修改到右边。p>
在大多数情况下，如果你的链接文本长度相似，你将很难区分两者。这两种方法都不是很完美，但都很好
小提琴：
脚注

我使用文本对齐：justify
和内联块
尝试了一些其他方法，但是CSS引擎不会像对待普通单词一样对待内联块，因此不会对齐一行内联块
将左边距
设置为%值在某些窗口宽度下不起作用，并且最右边的链接将不在所需的边缘上
jQuery方法以前已经尝试过，请参阅：

您可以使用文本对齐：对齐
并忽略最后一个左对齐行#last
不可见，由于左侧填充：100%，因此占据最后一行：
如果要垂直对齐菜单文本，请结合使用行高：
ul#nav { 
  text-align: justify;
  width: 100%;
  background: yellow;
  height: 2em;
  line-height: 2em;
}

。你需要一个IECan吗？你可以发布一个简单的图像，显示你想要的导航元素的样子？或者发布一些代码。链接的数量会固定吗？还是可变？链接的数量将是固定的。基本上，它需要如下所示：-最左边和最右边的元素粘在边上，所有其他元素间隔均匀-即使在调整大小时…谢谢！图像做得很好，现在很清晰，稍后会看，这里稍晚一点。这是一个有用的小问题，值得一些努力！这是一个相当棘手的问题。想知道是否有人能想到一个css补丁。也许，如果不是这样的话，它可以通过使用JSI来实现，就像您的css表解决方案一样，但我认为使用jQuery是过分的。使用text align:justify
时是否考虑了最后一行框？它总是左对齐的。jQuery太过分了，但很高兴知道我能做到！我确实尝试过使用text align:justify，但我忽略了它被jeft-justify的微妙之处。好的观点，欢迎评论。我喜欢这个方法（+1），但我没有完全理解最后一个元素在证明一行的合理性方面的微妙之处。但是，结果是两行导航（第二行没有内容），这可能并不总是可取的。
ul#nav { 
  text-align: justify;
  width: 100%;
  background: yellow;
  height: 2em;
  line-height: 2em;
}