Q&A
<ul>にこれをして
display: flex;
flex-direction: column;
文字を小さくするのはダメなのですか？
HTML+CSSで、高さ固定のリストを横に複数並べたいです。
現在のコードだと<ul>の幅が、一番長い<li>の幅になってしまい、複数列あるリストの場合、隣のリストと被ってしまいます。
よろしくお願いいたします。
該当のソースコード
html
1 2 <style> 3 .list { 4 display: flex; 5 flex-wrap: nowrap; 6 column-gap: 20px; 7 white-space: nowrap; 8 } 9 ul { 10 height: 80px; 11 display: flex; 12 flex-wrap: wrap; 13 flex-direction: column; 14 list-style: none; 15 padding: 0px; 16 column-gap: 20px; 17 background-color: aqua; 18 } 19 ul li { 20 white-space: nowrap; 21 background-color: beige; 22 } 23 </style> 24 25 <div class="list"> 26 <div> 27 subtitle 28 <ul> 29 <li>aaaaa</li> 30 <li>bbb</li> 31 <li>ccccccccc</li> 32 <li>ddddddddddddddddddd</li> 33 <li>eeeeeee</li> 34 <li>f</li> 35 </ul> 36 </div> 37 38 <div> 39 subtitle 40 <ul> 41 <li>aaaaa</li> 42 <li>bbb</li> 43 <li>ccccccccc</li> 44 <li>ddddddddddddddddddd</li> 45 <li>eeeeeee</li> 46 <li>f</li> 47 </ul> 48 </div> 49 </div>
いろいろやってみたのですが、CSSだけでは実現できなかったので、javascript を使ってもいいですか？？？
回答3件
1
3行固定ではないのですね。失礼致しました。
Stack Overflowからの完全な受け売りですが、writing-modeを使う解決策があったので紹介します。
Stack Overflow: How can I make a display:flex container expand horizontally with its wrapped contents?
html
1 <style> 2 .list { 3 display: flex; 4 flex-wrap: nowrap; 5 column-gap: 20px; 6 white-space: nowrap; 7 } 8 ul { 9 height: 80px; 10 display: flex; 11 writing-mode: vertical-lr; 12 margin: 1em 0; 13 flex-wrap: wrap; 14 flex-direction: row; 15 list-style: none; 16 padding: 0px; 17 row-gap: 20px; 18 background-color: aqua; 19 } 20 ul li { 21 writing-mode: horizontal-tb; 22 white-space: nowrap; 23 background-color: beige; 24 } 25 </style> 26 27 <div class="list"> 28 <div> 29 subtitle 30 <ul> 31 <li>aaaaa</li> 32 <li>bbb</li> 33 <li>ccccccccc</li> 34 <li>ddddddddddddddddddd</li> 35 <li>eeeeeee</li> 36 <li>f</li> 37 </ul> 38 </div> 39 40 <div> 41 subtitle 42 <ul> 43 <li>aaaaa</li> 44 <li>bbb</li> 45 <li>ccccccccc</li> 46 <li>ddddddddddddddddddd</li> 47 <li>eeeeeee</li> 48 <li>f</li> 49 </ul> 50 </div> 51 </div>
フレックスコンテナーにはwriting-mode: vertical-lr;を指定し、アイテムにはwriting-mode: horizontal-tb;を指定します。
コンテナーが縦書きと見なされるので、flex-directionやgapをrowに変更することがコツです。
投稿2023/01/20 02:48
編集2023/01/20 02:49
総合スコア368
回答へのコメント
この発想は出ないですね……確かに希望通りの動作になりました！ありがとうございます！
0
ベストアンサー
1列のリスト項目が3つ固定になりますが、gridを使う方法はどうでしょうか。
html
1 <style> 2 .list { 3 display: flex; 4 flex-wrap: nowrap; 5 column-gap: 20px; 6 white-space: nowrap; 7 } 8 ul { 9 height: 80px; 10 display: grid; 11 grid: repeat(3, min-content) / auto-flow; 12 column-gap: 20px; 13 list-style: none; 14 padding: 0px; 15 background-color: aqua; 16 } 17 ul li { 18 white-space: nowrap; 19 background-color: beige; 20 } 21 </style> 22 23 <div class="list"> 24 <div> 25 subtitle 26 <ul> 27 <li>aaaaa</li> 28 <li>bbb</li> 29 <li>ccccccccc</li> 30 <li>ddddddddddddddddddd</li> 31 <li>eeeeeee</li> 32 <li>f</li> 33 </ul> 34 </div> 35 36 <div> 37 subtitle 38 <ul> 39 <li>aaaaa</li> 40 <li>bbb</li> 41 <li>ccccccccc</li> 42 <li>ddddddddddddddddddd</li> 43 <li>eeeeeee</li> 44 <li>f</li> 45 </ul> 46 </div> 47 </div>
投稿2023/01/19 12:49
編集2023/01/19 12:57総合スコア368
回答へのコメント
ご返信ありがとうございます。内容や件数が毎日のように変わるところに使用したいのでできるだけ固定化は避けたいと思っています。
失礼しました！これで大丈夫でした！いずれにせよ高さを固定する必要はあるので縦の項目数の固定はほぼ同義でした。先ほどいただいた回答でもできましたが可読性的にこちらの方が理想的でした。
0
javasprictを使わないのであれば。
<div>の幅が見た目上
この<div>をサイズ指定して。
<li>の幅を上記<div>の幅 ÷ 2 - 10px して指定すれば、なんとなくできましたが。 <li>の文字列の文字数に合わせて、都度指定してあげる必要があると思います。 自動でうにょーんという感じのは、たぶん javasprict をつかわないと実現できないかなと。 javasprict を使ってもいいのであれば、コードを追加しますが javasprict をつかってもいいですか？？HTML/CSS
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <title>コードビュー</title> 7 <link href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/4-1-3/css/reset.css" rel="stylesheet"> 8 <style> 9 div.hoge{width: 500px;} 10 .list { 11 display: flex; 12 flex-wrap: nowrap; 13 column-gap: 20px; 14 white-space: nowrap; 15 } 16 ul { 17 height: 80px; 18 display: flex; 19 flex-wrap: wrap; 20 flex-direction: column; 21 list-style: none; 22 padding: 0px; 23 column-gap: 20px; 24 background-color: aqua; 25 width: 500px; 26 } 27 28 ul li { 29 white-space: nowrap; 30 background-color: beige; 31 width: 240px; 32 display: inline-block; 33 } 34 </style> 35 36</head> 37 38<body> 39 40<div class="list"> 41 <div class="hoge"> 42 <h2>subtitle</h2> 43 <ul class="hoge1"> 44 <li>aaaaa</li> 45 <li>bbb</li> 46 <li>ccccccccc</li> 47 <li>ddddddddddddddddddd</li> 48 <li>eeeeeee</li> 49 <li>f</li> 50 </ul> 51 </div> 52 53 <div> 54 <h2>subtitle</h2> 55 <ul class="hoge2"> 56 <li>aaaaa</li> 57 <li>bbb</li> 58 <li>ccccccccc</li> 59 <li>ddddddddddddddddddd</li> 60 <li>eeeeeee</li> 61 <li>f</li> 62 </ul> 63 </div> 64</div> 65 66 67 68</body> 69<script type="text/javascript"> 70</script> 71 72</html>
投稿2023/01/19 07:47
編集2023/01/19 08:09総合スコア339
回答へのコメント
ご返信ありがとうございます。JavaScriptならいくつか解決策を思いついたのですが、CSSでできそうな感じがして……。難しいのでしょうか。
