こんにちは。
カテゴリーを表示する枠内で一行辺り3つずつ、
カテゴリーサムネイルとカテゴリー名がセットになったものを
動的に書き出したいのですが、最後の行にはmargin-bottomを付けたくありません。
その場合、どのようにhtmlとcssを組めば実現出来るのでしょうか?
============
■ 得たい結果
============
-------
■ ■ ■ < - margin-bottom:10px
■ ■ ■ < - margin-bottom:10px
■ ■ < - ★最後の行だけmargin-bottom:0pxにしたい!!
-------
* カテゴリの数だけ動的に<li>が書きだされる
* 一行あたり最大3つ画像とカテゴリ名がセットのliが並ぶ。
* 最後の行はliが1つのみになる場合もあるし3つになる場合もある。
======
■ html
======
<div id="category-section>
<ul>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
<li><img src=""><br><a href="">カテゴリ名</a></li>
</ul>
</div>
======
■ CSS
======
ul {
width:100%;
padding:10px;
overflow:hidden; /*簡易clearfix*/
}
li {
margin-bottom:10px;
width:32%;
margin-right:2%
float:left;
}
/* 行の3つ目のliは右マージン0 */
li:nth-child(3n) {
margin-right:0;
}
/* 最後の行だけ下マージンを0にしたい!! */
============
■ その他備考
============
一行単位で<div class="row">で囲って、最後の行のみmargin-bottomを0にしてあげるというので出来そうな気がするのですが、WPで3つずつ、別々の<div class="row">に3つずつ<li>を書き出すことが簡単に出来るのかどうかがわかりません。
みんなの回答 3 件
ul {
margin-bottom: -10px;
}
liのmargin-bottom分マイナスする。これじゃダメすか?
nth-child使ってるなら同じように:last-childでいんじゃない?
li:nth-child(7),li:nth-child(8) {
margin-bottom:0;
}
で強引に出来なくもないけど
.
個人的にはこっちにして上を削るほうをおすすめする。
li {
margin-top:10px;
}
li:first-child,li:first-child + li,li:first-child + li + li {
margin-top:0;
}
これならliの数増えても大丈夫だし、IE7以上から対応できる。
関連するトピックス