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>
回答3件