-
ID:ab4g9B さんの質問

CSSで3列のブロックを作っています。
.
<ul>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
<li>ブロック</li>
</ul>
.
これをfloatで横並びにして3列にしています。図で書くと以下のような感じです。
■■■
■■■
.
これを「最後の行だけmargin-bottom:10pxを適用しない」という書き方はどうすればいいのしょうか?:last-child{margin-bottom:0;}だけだと適用されません。ちなみにul内のブロックの数は任意だとします。

みんなの回答 4 件

ID:Ukw75H さんの回答

適用されないっつうかソース間違ってるし

ID:Me6.Tz さんの回答

これで行けると思う
li:nth-child(3n+1):nth-last-child(-n+3),
li:nth-child(3n+1):nth-last-child(-n+3) ~ li {
margin-bottom: 0;
}

ID:iqLbYa さんの回答

愚直にそのままかけばいいと思うの。
2つ書くけど、要素が6個の場合は、どちらも同じ結果。


  • /*下から3つの要素*/
    li:nth-last-child(-n+3){
    margin-bottom: 0;
    }
    /*上から4つめ以降の要素*/
    li:not(:nth-child(-n+3)){
    margin-bottom: 0;
    }

ID:QZLkp0 さんの回答

ulにネガティブマージンじゃだめですか?

ID:ab4g9B

皆さんありがとうございます。ネガティブマージンが一番簡単でしたので、こちらを採用します。

最終更新日:2016-11-24 (1,633 views)

関連するトピックス

ページ上部に戻る