HTML/CSS 2018.10.24

CSSでシンプルな横スクロールのリスト（ul）

施工実績や導入事例などで、サムネイル付きのリストを、横スクロールにする方法です。

<ul class="list">
        <li>
        	<a href="http://〜/aaa">
        	<div><img src="bbb.jpg"></div>
			<div>タイトル</div>
			</a> 
		</li>
		<li>
        	<a href="http://〜/aaa">
        	<div><img src="bbb.jpg"></div>
			<div>タイトル</div>
			</a> 
		</li>
		<li>
        	<a href="http://〜/aaa">
        	<div><img src="bbb.jpg"></div>
			<div>タイトル</div>
			</a> 
		</li>
		<li>
        	<a href="http://〜/aaa">
        	<div><img src="bbb.jpg"></div>
			<div>タイトル</div>
			</a> 
		</li>
</ul>

タイトル

ul.list{
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
}
 ul.list li{
        display: inline-block;
        width: 45%;
        margin: 10px;
        white-space:normal;
        vertical-align: top;
}

ul.list{

overflow-x: auto;

white-space: nowrap;

-webkit-overflow-scrolling: touch;

}

ul.list li{

display: inline-block;

width: 45%;

margin: 10px;

white-space:normal;

vertical-align: top;

}

liのwhite-space:normalは、タイトルが長くなった時に、ulであらかじめwhite-space: nowrapにしちゃってるので、改行しないため、liで新たに追加しています。ですので、２行にならない構造であれば不要です。
またvertical-align: topは、画像の高さが違った場合、そのままだとした揃えになるので上に合うようにしています。