1

私が言及しているナビゲーションは次のようになります。

home | about | contact

では、この種のナビゲーションに使用するのに最適で最も柔軟な HTML/CSS は何でしょうか? 私が思いつく最善の方法は、区切り文字をスパンでラップして、それらの周りの間隔を制御できるようにすることです。例えば：

<a href="#">home</a><span>|</span><a href="#">about</a>

それが最善のアプローチですか？

4

2 に答える 2

2

これはすべてターゲット ブラウザに帰着します。厳密な HTML4.01 として検証することが重要であるかどうか (つまり、上司/委員会がそれを「大したこと」と考えている場合) かどうかにかかっています。

個人的には、ナビゲーション メニューの目的で、すべてを順不同のリストにラップする方法をとっています。

4.01 準拠が重要な場合は、それを div.nav でラップします<nav id="main-nav">または類似。

<ul><li><a href="/">home</a></li><li><a href="about">about</a></li></ul>

次にCSSで：

#main-nav li { display : inline-block; list-style : none; }

そこから、各<li>要素のパディングを好きなように設定できます。:after疑似セレクターを使用して「|」を挿入できます または、それぞれの後に必要なカスタム画像を追加します（必要に応じて、 を使用し:last-child:afterて、最後の画像の後に画像がないことを確認できます）。

aをいじって、ブロック要素に変えたり、パディングをいじってli、テキストだけでなくブロック全体をクリック可能にすることもできます。

こちらの oldIE-compatibility hack を参照してください:必要に応じて、クリック可能なリンクを大きくする方法。

于 2012-07-22T06:03:54.567 に答える
1

最初の要素を除いて、すべての要素に左の境界線を追加するだけです。

HTML:

​&lt;ul id="nav-list">
<li>Home</li>
<li>Blog</li>
<li>Link</li>
</ul>​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS の場合:

#nav-list li {
    display: inline-block;
    border-left: 1px solid black;
    padding: 4px;   
}
#nav-list li:first-child {
    border-left: 0;
}
​

上記のコードが jsfiddle で実際に動作しているのを見てください!これはクロスブラウザー互換 (IE7+) ですが、IE6 のSelectivizrの ようなもので簡単にポリフィルできます。より多くのブラウザーに到達するために、border-left と first-child を使用することを提案してくれた Rob W に感謝します!

于 2012-07-22T08:53:47.630 に答える