ホームページ > 記事 > ウェブフロントエンド > 行のサイズが異なる場合に行の最後の要素からマージンを削除する方法
行の最後の要素からマージンを削除する方法 (行のサイズに関係なく)
行に複数の要素がある場合、行ごとの要素の数は動的に変化する可能性があるため、純粋な 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 サイトの他の関連記事を参照してください。