我正在尝试实现这样的横向导航链接：
|--------------------------------------| |Link1 L2 LongLink3 Link4 Link5| |--------------------------------------|
规则：
>链接间隔均匀(每个链接之间的空白空间相同)
>链接可以是可变宽度
>集体地,链接可以跨越其容器的整个可用宽度
>第一个和最后一个链接与他们的容器的eges排列(链接是对齐的)
>在IE8上工作
> CSS / HTML解决方案,没有JavaScript
>无法设置特定的容器高度或链接高度
>不能预先计算和硬编码链接之间的空间(链接数可能会改变)
This solution几乎工作 – 这么近但是介绍空：后的内容在导航容器中添加不需要的附加垂直空间(为什么？).有没有办法去除空的注入空间的额外垂直空间：内容？
几乎可以工作的HTML：
<ul id="nav">
<li><a href="#">HOME</a></li> <!--
--><li><a href="#">ABOUT</a></li> <!--
--><li><a href="#">BASIC SERVICES</a></li> <!--
--><li><a href="#">OUR STAFF</a></li> <!--
--><li><a href="#">CONTACT US</a></li><!--
--></ul><!--
--><h2>next element</h2>
几乎可以工作的CSS：
* {
padding: 0;
margin: 0;
}
#nav {
text-align: justify;
outline: 1px solid grey;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}
#nav li {
display: inline-block;
background-color: green;
}
#nav a:link {
display: block;
color: white;
padding: 1em 0;
}
解决方法
奇怪的问题.
我认为这与内联元素在标记中遵循空白的事实有关,尽管空格对于text-align是必要的：对齐工作,因此它不能被删除.
由于空格是由字体的大小确定的,您可以将父代的字体大小设置为0,然后相应地设置子项的字体大小.它工作.. jsFiddle example
#nav {
text-align: justify;
outline: 1px solid grey;
font-size:0;
}
#nav li {
display: inline-block;
background-color: green;
font-size:16px;
}
目前不能想到更好的东西.我会让你知道,如果我这样做.
