HTMLのリストを縦並びで、途中で折り返す方法

###前提・実現したいこと
HTMLのリストを縦並びで、途中で折り返す方法がありましたら教えて下さい。
また、IEは必ず対応してあるもので。

kei344

2017/03/27 04:41

具体的にHTMLおよびCSSを質問文に追記し、具体的にどの部分が問題なのかを追記されたほうが回答を得られやすいと思います。

行動規範の内容に同意します

回答2件

CSSのcolumn-fill:auto;またはflex-flow:column wrap;で実現できそうです。たぶんIE10+条件です。
類似の質問に回答したことがありますので、参考にしてみてください。
PHP - 動的に表示されるテキストの折り返しについて(67132)｜teratail

投稿2017/03/28 04:34

Lhankor_Mhy

総合スコア36142

リストliを包括するulに幅を指定して、liにfloatをかけることで、
リストが横に並び、幅を超えた場合に折り返しがされます。

floatを使った場合は、必ずクリア処理overflow:hidden;zoom:1;を行う必要があります。（※clearfixなど他にも色々なクリア方法があります）
floatの指定はクリアしない場合に、包括する要素（この場合はul）が高さの認識を失い、折り返し後にうまく並んでくれないのでご注意ください。

サンプルコードを置いておきますのでご参照ください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>サンプル</title>
6<style>
7ul {
8width:200px; /* 折り返したい幅を指定 */
9overflow:hidden;zoom:1; /* floatクリア */
10}
11ul li {
12float:left;
13list-style:none;
14}
15</style>
16</head>
17<body>
18<ul>
19<li>リスト１</li>
20<li>リスト２</li>
21<li>リスト３</li>
22<li>リスト４</li>
23<li>リスト５</li>
24<li>リスト６</li>
25</ul>
26</body>
27</html>