質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3306閲覧

リストを均等に3列表示する方法

kizunami

総合スコア19

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/25 02:59

編集2018/08/25 05:52

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 131415(略) 161718<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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

まちがいさがし。

css

1.ul li:nth-child(3n-1){ 2 margin: 0 2%; 3}

ulクラス、どこにあるかな?

デバッグの鉄則は、まずは自分の書いたコードを疑うこと。
セレクタを正しく指定すればmarginはちゃんとききますよ。

投稿2018/08/25 03:19

hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kizunami

2018/08/25 05:56

ありがとうございます!ご指摘の通り、ulクラスの位置がおかしかったようです。コードを精査するよう気をつけます。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問