Q&A
```css
body{}
```
```html
<body>
```
のように、Markdownを使って書いてください。
と、前回の質問にも書きました。
ご不明の点（どうやったらいいかわからない）とか、不可能なこと（宗教上の理由でMarkdownが使えない）などがおありでしたら、その旨を補足願います。
前提・実現したいこと
画面の幅を狭くしたときに、数字わくの幅が狭くならずに2段、3段と下に表示されるようにしたいです
発生している問題・エラーメッセージ
幅が狭くなるだけで下に表示されません
該当のソースコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Advanced-tec co.</title> <style type="text/css"> body { margin: 0px; padding: 0px; background-color: #ff4500; } ul { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0px auto; padding: 0; background-color: #ff4500; border: 1px solid #ff4500; } li{ width: 15%; padding: 0; text-align: center; background-color: #ff4500; color: #000000; list-style: none; } </style> </head> <body> <img src="img/haikei.jpg" width="100%" alt="背景" /> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>試したこと
flex-wrap: wrap;
を指定したのですが、反応しないです。
補足情報
Dreamweaverを使っています
どうぞよろしくお願いいたします。
大変失礼いたしました。
ネットでMarkdownについて調べました。
書き方のルールだということは分かりましたが、大変お恥ずかしながら書き方が分かりませんでした。
どうぞよろしくお願いいたします。
質問と回答はMarkdownが使えます。
ですから、ご質問のコードを
```
の行で挟むようにご質問を編集すると、回答者たちが大変読みやすくなります。
前回の質問が解決であれば、ベストアンサーを選び、「解決済」にしてください。
もし、解決していないのであれば、その旨を質問に追記してください。
Lhankor_Mhy様
了解いたしました。編集いたします。
yoshinavi様
ベストアンサーを選ばせていただきました、
おかげさまで解決できました。
不慣れで申し訳ございません。
最初は皆、不慣れな初心者です。ひとつずつクリアしていけば、大丈夫です。
回答2件
0
ベストアンサー
liのwidth: 15%;が原因かと思います。
15%に指定されているので、画面幅が小さくなってもその15%分の横幅になります。
liを折り返すためには、widthを固定値で書くか、widthと一緒にmin-widthを指定することで最低幅を確保することができます。
例を載せておきます。
css
1li{ 2width: 15%; 3min-width:100px; 4padding: 0; 5text-align: center; 6background-color: #ff4500; 7color: #000000; 8list-style: none; 9}
投稿2019/03/07 02:52
総合スコア716
0
親となる包含ブロックの幅に対するパーセント値で定義します。包含ブロックの幅が子要素の幅に依存する場合、子要素のレイアウトは未定義の結果になります。
width - CSS: カスケーディングスタイルシート | MDN
width: 15%;とありますから、15%*4<100%になるのは仕方がないのではないかと。
投稿2019/03/07 02:47
総合スコア36115
コメントいただきまことにありがとうございました。
おかげ様で無事、思うように動くようになりました、
感謝の気持ちでいっぱいです。
ありがとうございました！
あなたの回答
tips
プレビュー
