navでまとめたものを区切る方法

Question

<nav>
    <ul>
        <li><a href="#">Information</a></li>
        <li><a href="#">Schedule</a></li>
        <li><a href="#">Artist</a></li>
        <li><a href="#">Event</a></li>
        <li><a href="#">Ticket</a></li>
        <li><a href="#">Inquiry</a></li>
    </ul>
</nav>

Information|Schedule|Artist|Event|Ticket|Inquiry
このように区切りを表したいのですが何を使えばよろしいですか？

Comments

[m.ts10806]

JavaScriptをどう絡ませたいのかわかりませんが、html、CSSのほうが関係するのでは？タグは5つまでつけられるので追加しておいてください。

Answer 1

<style>
nav ul,nav li{list-style:none;display:inline;}
nav li:not(:first-child):before {content:" | ";}
</style>

<nav>
    <ul>
        <li><a href="#">Information</a></li>
        <li><a href="#">Schedule</a></li>
        <li><a href="#">Artist</a></li>
        <li><a href="#">Event</a></li>
        <li><a href="#">Ticket</a></li>
        <li><a href="#">Inquiry</a></li>
    </ul>
</nav>

Answer 2

今のhtml構造を変更しないまま簡単にするならCSSでborder-left,border-rightをうまく使えばできると思います。
今のhtml構造を変更できるのであれば各リンクの間にその｜分の幅だけもったliを置いておくというのもありです。

Answer 3

CSSの隣接セレクタを使うのはどうでしょうか。

参考ページ

サンプル

<nav>
    <ul>
        <li><a href="#">Information</a></li>
        <li><a href="#">Schedule</a></li>
        <li><a href="#">Artist</a></li>
        <li><a href="#">Event</a></li>
        <li><a href="#">Ticket</a></li>
        <li><a href="#">Inquiry</a></li>
    </ul>
</nav>

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li + li {
  border-left: solid 1px #333;
}

Answer 4

シンプルに、bootstrapのnavibarを使えば良いのでは？
http://getbootstrap.com/2.3.2/components.html#navbar