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