行の最後の要素からマージンを動的に削除するにはどうすればよいですか?

行の最後の要素のマージンの動的な削除

問題: リスト内の各行の最後の要素からマージンを削除します。行ごとの要素の数は画面サイズに応じて動的に変化します。

課題: :last-child { margin-right: 0 } などの従来の CSS マージン削除手法は、最後の部分のみに対応します。リストの要素。

解決策:

オプション 1: 負のマージン

コンセプト: 親に負のマージンを適用する子要素のマージンをオフセットする要素。

例:

<code class="css">ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}</code>

オプション 2: メディア クエリ

コンセプト: メディア クエリを使用して、行ごとの要素数に基づいて各行の最後の要素をターゲットにします。

例:

<code class="css">@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {
    li:nth-child(3n+3) {
        margin-right: 0;
        border-right: none;
    }
}

@media (min-width: 600px) and (max-width: 799px) {
    li:nth-child(4n+4) {
        margin-right: 0;
        border-right: none;
    }
}</code>

長所:

• 詳細ですが、よりカスタマイズが可能です。

短所:

• 手動の計算とメディアが必要です各シナリオのクエリ。

選択肢: 最適なソリューションは、特定の設計要件と柔軟性によって異なります。負のマージンはよりシンプルですが、メディア クエリはより詳細な制御を提供します。

以上が行の最後の要素からマージンを動的に削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。