正確對齊水平導航欄中的多個單詞鏈接的間距？

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;}