正确对齐水平导航栏中的多个单词链接的间距？

Question

我正在构建一个基于文本的导航栏，在父div的宽度上均匀分布，但我在将某些导航项分组在一起时出现问题。每个单词，而不是每个列表项，分布在整个div的宽度。有没有办法在div中均匀分配每个列表项目，但保留较长的项目，例如“/ painting &混合媒体”是否正确分隔？我在第一个链接前面还有一个幻影空间，因此我不能以我希望的方式证明它是正确的。

澄清： 发布的代码显示指向“/绘制&混合纸张”的链接，每个词之间有额外的间距。下面的示例中，破折号表示导航菜单中的空格：

当前：... /打印--- /插图--- /绘画---％---混合---媒体--- /关于--- /博客...

期望：... /打印---/---插图/绘画 - & -Mixed媒体---/---简介/博客...

这里的CSS：

.navbar{ 
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size:16px; 
    text-decoration: none; 
    text-align:justify; 
    width: 800px; 
} 

.navbar * { 
    display: inline; 
} 

.navbar span { 
    display: inline-block; 
    position: relative; 
    width: 100%; 
    height: 0; 
} 

a.nav:link {color:#000; text-decoration: none;} 
a.nav:visited {color:#000; text-decoration: none;} 
a.nav:hover {color:#6CC; text-decoration: none;} 
a.nav:active {color:#F90; text-decoration:none;} 

和HTML：

<div class="navbar"> 
    <ul> 
    <li><a href="index.html" class="nav">/home</a></li> 
    <li><a href="design.html" class="nav">/design </a></li> 
    <li><a href="prints.html" class="nav">/prints</a></li> 
    <li><a href="illustration.html" class="nav">/illustration</a></li> 
    <li><a href="painting.html" class="nav"> /painting &amp; mixed media</a></li> 
    <li><a href="about.html" class="nav">/about</a></li> 
    <li><a href="external_blog.html" class="nav">/blog</a></li> 
    <li><a href="cv.html" class="nav">/cv</a></li> 
    </ul> 

    <span></span> 
    </div> 

Answer 1

Demonstration fiddle

HTML：

<div class="navbar"> 
    <ul> 
     <li><a href="index.html">/home</a></li> 
     <li><a href="design.html">/design </a></li> 
     <li><a href="prints.html">/prints</a></li> 
     <li><a href="illustration.html">/illustration</a></li> 
     <li><a href="painting.html">/painting &amp; mixed media</a></li> 
     <li><a href="about.html">/about</a></li> 
     <li><a href="external_blog.html">/blog</a></li> 
     <li><a href="cv.html">/cv</a></li> 
    </ul> 
    <span></span> 
</div> 

CSS：

.navbar { 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    text-align: justify; 
    width: 800px; 
} 
.navbar * { 
    display: inline; 
} 
.navbar a { 
    display: inline-block; 
    text-decoration: none; 
} 
.navbar span { 
    display: inline-block; 
    width: 100%; 
} 
.navbar a:link, 
.navbar a:visited {color:#000;} 
.navbar a:hover {color:#6CC;} 
.navbar a:active {color:#F90;}