行のサイズが異なる場合に行の最後の要素からマージンを削除する方法

行の最後の要素からマージンを削除する方法 (行のサイズに関係なく)

行に複数の要素がある場合、行ごとの要素の数は動的に変化する可能性があるため、純粋な CSS を使用して各行の最後の要素からマージンを削除するのは困難な場合があります。

負のマージンの使用

One効果的な手法は、親要素に負のマージンを使用することです。これにより、子要素間の間隔を維持しながら、子要素が親内に完全に収まっているかのような錯覚が生まれます。

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

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

マージンを分割して両側に適用すると、特に互換性が必要なデザインの場合、より良い結果を得ることができます。左から右 (LTR) 方向と右から左 (RTL) 方向の両方を使用します。

メディア クエリの利用

別のアプローチ (予測できる場合)特定の画面サイズ内の行ごとの要素の数を指定するには、メディア クエリを使用して、nth-child() を使用して行の最後の要素をターゲットにします。このメソッドにより、より具体的なスタイル調整が可能になります:

<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;
    }
}

/* Add more media queries as needed... */</code>

以上が行のサイズが異なる場合に行の最後の要素からマージンを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。