ホームページ > ウェブフロントエンド > CSSチュートリアル > 改行で消える水平リスト用のレスポンシブ CSS 専用セパレーターを作成する方法

改行で消える水平リスト用のレスポンシブ CSS 専用セパレーターを作成する方法

Mary-Kate Olsen
リリース: 2024-12-16 10:43:10
オリジナル
479 人が閲覧しました

How to Create Responsive CSS-Only Separators for Horizontal Lists That Disappear on Line Breaks?

レスポンシブ水平リストの CSS 専用セパレーター

レスポンシブ ナビゲーションのコンテキストで、リスト項目間のセパレーターを次の位置で削除するにはどうすればよいですか?ビューポートの変化によって生じる改行サイズ?

レスポンシブセパレータ

次のシナリオを考えてみましょう:

  • ワイドビューポート:

    -> Item 1 | Item 2 | Item 3 | Item 4 | Item 5 <-
    ログイン後にコピー
  • 小さいビューポート:

    -> Item 1 | Item 2 | Item 3 <-
    -> Item 4 | Item 5 <-
    ログイン後にコピー

ただし、場合によっては、この例に示すように、区切り文字は改行位置に残る場合があります。 fiddle.

CSS のみのソリューション

末尾および行末の空白の自動折りたたみを利用することで、応答性の高い区切り文字を作成できます:

b {
    background: red;
    outline: 1px solid blue;
}
div {
    resize: both;
    overflow: hidden;
}
ログイン後にコピー
<div>
word<b> </b>.repeat(42)
</div>
ログイン後にコピー

以上が改行で消える水平リスト用のレスポンシブ CSS 専用セパレーターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート