Q&A
実際にCSSを書いてみましたか？
以下のようなソースがあります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 1000px; } ul { display: flex; flex-wrap: wrap; } li { width: 40%; } </style> </head> <body> <div class="container"> <ul> <li><a href="#">test1</a></li> <li><a href="#">test2</a></li> <li> <a href="#">test3</a> <ul> <li><a href="#">test3-1</a></li> <li><a href="#">test3-2</a></li> <li><a href="#">test3-3</a></li> </ul> </li> <li><a href="#">test4</a></li> <li><a href="#">test5</a></li> <li><a href="#">test6</a></li> </ul> </div> </body> </html>
リストの中に子リストを持つリストが存在します。上記を以下のような並びにしたいです。
test1 test2 test3 test4 test3-1 test5 test3-2 test3-3
提示しているCSSの指定（display: flex;）ですと、以下のように子リストの分スペースが生まれてしまいます。
test1 test2 test3 test3-1 test3-2 test3-3 test4 test5
何か良い方法は無いでしょうか？
レスポンシブ対応もありますので、出来ればdisplay: flex;を使用して実装したいのですが、可能でしょうか？
お手数ですが、よろしくお願いいたします。
回答1件
0
ベストアンサー
やってることはflex処理ではないのでfloatでやるしかないでしょう。
しかしfloat処理はあまりおすすめできないので
構造とレイアウトを練り直したほうが良いと思います
投稿2021/05/31 03:05
総合スコア116724
ご回答いただきありがとうございます。
現在の構成で簡単に解決するのは難しいという事ですね。
構造を考え直してみたいと思います。
参考までにfloat
.container {
width: 100%;
}
.container > ul > li {
float:left;
width: 40%;
display:block;
}
あなたの回答
tips
プレビュー
