12個の要素を3列×4行で表示させたいと思っています。
中央にくる要素のみ両側に余白を入れたいと思い、疑似クラス「:nth-child()」を用いて3等分する際中心に来るリスト(2番目、5番目、8番目…)の左右にmarginを設定してみたのですがmarginが効きません。
どこを変更すれば良いのか、またはもっと良いやり方があればお教えいただきたいです。
現状下記のようにしています(リストは長いので途中省略しています)。
よろしくお願いいたします。
html
1<div class="list"> 2<ul> 3<li> 4<p>テキスト</p> 5</li> 6<li> 7<p>テキスト</p> 8</li> 9<li> 10<p>テキスト</p> 11</li> 12 13・ 14・ 15(略) 16・ 17・ 18<li> 19<p>テキスト</p> 20</li> 21<li> 22<p>テキスト</p> 23</li> 24</ul> 25</div>
css
1.list ul:after{ 2 content: ""; 3 display: block; 4} 5 6.list ul li{ 7 display: block; 8 float: left; 9 width: 32%; 10 height: 430px; 11 12} 13.ul li:nth-child(3n-1){ 14 margin: 0 2%; 15} 16
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/25 05:56