行数がわからない場合に最後の列のマージンを削除するにはどうすればよいですか?

行数の知識がない場合の最後の列のマージンの削除

Web デザインでは、多くの場合、最後の要素ごとに右マージンを削除することが望ましいです。一行。このタスクは、行ごとの要素数を事前に決定できない動的な行長を扱う場合に困難になります。

負のマージン

この効果を達成するための 1 つのトリックは、次のとおりです。親コンテナに負のマージンを追加します。これにより、子要素間の間隔を維持しながら、子要素が親内で完全に整列しているかのような錯覚が生じます。

ul {
    margin-left: -5px;
    margin-right: -5px;
}

li {
    margin-left: 5px;
    margin-right: 5px;
}

margin-left と margin-right が均等に適用されるため、両方の LTR (左) に対応できます。 -to-right) および RTL (右から左) 要素の配置。ただし、水平スクロールを防ぐために、overflow-x: hidden を追加する必要がある場合があります。

メディア クエリ

代替ソリューションとしては、メディア クエリを使用して各要素の最後の要素をターゲットにすることが含まれます。行。このアプローチは、負のマージンを使用するよりも簡潔ではありませんが、スタイル調整をより詳細に制御できます。

@media (min-width: 400px) and (max-width: 499px) {
    li:nth-child(even) {
        margin-right: 0;
        border-right: none;
    }
}
/* ... */

さまざまな画面サイズにメディア クエリを指定することで、さまざまな行の長さに対して最後の要素のスタイルを定義できます。

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