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

我正在构建一个基于文本的导航栏，在父div的宽度上均匀分布，但是我在将某些导航项分组在一起时遇到了问题。每个单词（而不是每个列表项）分布在整个div的宽度上。是否有办法在div中均匀分布每个列表项，但保留较长的项，如“/绘画和混合介质”适当间隔？在我找不到的第一个链接前，我还有一个幻影空间，所以这并不是我所希望的那样

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

目前：…/印刷品---/插图---/绘画----%--混合---媒体---/关于---/博客

所需：…/印刷品---/插图---/绘画---&-混合介质---/关于---/博客

以下是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>

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>

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