CSS のみを使用してナビゲーション項目を効率的に分離するにはどうすればよいですか?

CSS によるナビゲーション分離の維持

ナビゲーション要素間にセパレーターを追加する場合、CSS はリストを追加するよりも効率的で視覚的に魅力的なソリューションを提供できます。

質問で提案された解決策はどちらも可能性があります。欠点。分離するリスト項目をさらに追加すると HTML 構造が乱雑になる可能性があり、画像にセパレーターを含めると誤クリックの問題が発生する可能性があります。

洗練された解決策は、純粋な CSS を使用してセパレーターを作成することです。このアプローチにより、HTML 構造を変更したり、要素の画像を変更したりせずに、望ましい視覚的分離を維持できます。

その仕組みは次のとおりです:

nav li + li:before{
    content: "|";
    padding: 0 10px;
}

このコードは、各リストの間に垂直バーを追加します。アイテム。隣接セレクターを使用すると、バーが最初の項目の前や最後の項目の後にではなく、リスト項目の間にのみ追加されるようになります。 :before 疑似セレクターは、既存のコンテンツに影響を与えることなく、各要素の前にバーを挿入します。

この CSS テクニックを利用することで、HTML 構造のきれいさを犠牲にしたり、誤ってユーザー エクスペリエンスを損なうことなく、目的の分離を実現できます。クリックします。

以上がCSS のみを使用してナビゲーション項目を効率的に分離するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。