等间距不同宽度的流体通航项目
我想要创建一个流畅的横向链接导航列表，其中导航链接是均匀的间隔，并占据了容器的全部宽度。Nav链接都是不同的宽度。第一个链接应该左对齐，最后一个链接应该是右对齐的。
我在使用以下技术方面取得了有限的成功：
ul {display: table;width: 100%;}
li {display: table-cell;}
a {display: block;} 同时也使用
ul {text-align: justify}
li {inline-block }但是，我编写的任何代码似乎都不能很好地处理不同宽度的元素。当导航器调整尺寸时，间距似乎不相等。
我需要导航器是流体的，第一个和最后一个元素被冲到包含ul的边缘，使元素彼此等距。
回答 2
Stack Overflow用户
发布于 2013-05-12 09:01:34
我想了一段时间，想出了两种合理的方法，这两种方法都很不错，但不完全像像素一样完美。一个是只基于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%来实现这一点，该设置为非零，但太小，无法容纳文本(除非屏幕宽为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(”页边距-左“，li_margin)；
我使用.not(".first")省略第一个li元素，然后使用.css设置左边框。
一个轻微的缺陷是在最右边，其中的链接不是完全对齐的，但是您可以通过将最后一个li浮动到右边来解决这个问题。
在大多数情况下，如果你的链接文本在长度上是相似的，你将很难区分两者。这两种方法都不是非常完美的像素，但相当好。
小提琴：http://jsfiddle.net/audetwebdesign/xhSfs/
脚注
我尝试了一些使用text-align: justify和inline-block的其他方法，但是CSS引擎并不像对待普通单词那样对待内联块，因此不会对一行内联块进行验证。
将left-margin设置为%值将无法在某些窗口宽度中完全工作，并且最右边的链接将不像所需的那样位于边缘。
以前曾尝试过jQuery方法，请参见：
Evenly-spaced navigation links that take up entire width of ul in CSS3
Stack Overflow用户
发布于 2013-05-12 09:35:22
您可以使用text-align: justify;并忽略最后一个左对齐行。#last是不可见的，因为padding-left: 100%;：http://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黑客吗？
https://stackoverflow.com/questions/16501067
复制
腾讯云开发者
