幅1200pxの中に、flexboxを使って幅400pxのボックスを三つ中に入れたいと思っております。しかし、なぜかボックスの隣に謎の空白ができてしまい、中央から少しずれてしまいます。この原因が全く分かりません。justify-content:centerを使ってもダメでした。分かる人がいたら、ぜひ教えていただけますでしょうか。何卒よろしお願いします。
HTML
1<!doctype html> 2 <html> 3 <head> 4 <title>模倣</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8<body> 9 10 <ul class="block_content"> 11 <li class="block"></li> 12 <li class="block"></li> 13 <li class="block"></li> 14 </ul> 15 16</body> 17</html>
CSS
1*{ 2 margin:0; 3 padding:0; 4} 5 6 7.block_content{ 8 display: flex; 9 width: 1200px; 10 margin: 0 auto; 11 list-style: none; 12} 13 14.block{ 15 width: 400px; 16 background :red; 17 height: 400px; 18 } 19 20
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
回答2件
あなたの回答
tips
プレビュー