navigation - パーセンテージを使用して均等に配置する

Question

要素を均等に分散する方法はありますか? レスポンシブ デザインに取り組んでおり、メニューに を均等に配置したいと考えてliいます。

HTML

<div id="navigation">
    <ul>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="about.html">About</a></li>
        <li>|</li>
        <li><a href="freebies.html">Freebies</a></li>
        <li><a href="lookbook.html">LookBook</a></li>
        <li><a href="gift-finder.html">Gift Finder</a></li>
    </ul>
</div>

CSS:

ナビゲーションul{

マージン:0; パディング:0;

}

ナビゲーション・リ{

display:inline-block;
font-size:30px;
font-family: 'delicious_smallcapsregular';

}

ナビゲーション {

幅:100%; }

ナビゲーションリア{

color:#737373;
text-decoration: none;

}