:last-child を使用せずに行の最後の要素からマージンを削除する方法

行の最後の要素からマージンを削除する

行の最後の要素からマージンを削除することは、Web デザインにおける一般的な課題です。 :last-child を使用してリストの最後の要素からマージンを削除することはできますが、要素のサイズが動的に変更される場合や、行ごとの要素の数が不明な場合には、この方法は理想的ではありません。

負のマージン

解決策の 1 つは、親要素に負のマージンを使用することです。このアプローチでは、個々の要素間のスペースを維持しながら、子要素が親要素内に収まっているかのような錯覚が生じます:

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

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

ただし、この手法では、水平スクロールを防ぐために、overflow-x: hidden などの追加のスタイルが必要になる場合があります。 .

メディア クエリ

行ごとの要素の数が予測可能な場合は、メディア クエリを使用して、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;
    }
}

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

使用される特定の n 番目の子セレクターは、行ごとの要素の数に応じて異なります。

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