普段floatを使って横並びにする方法をとっていましたが、floatだと解除等に手間がかかったりします。
もっと簡単なのが、「display: flex;」です。
CSSデータ
ul.lineup {
display: flex;
list-style: none;
padding: 0;
justify-content: center;
}
ul.lineup li {
margin: 10px;
word-wrap: break-word;
}
display: flex;
list-style: none;
padding: 0;
justify-content: center;
}
ul.lineup li {
margin: 10px;
word-wrap: break-word;
}
HTMLデータ
<ul class=”lineup”>
<li><img src=”img/lineup-img1.png” ></li>
<li><img src=”img/lineup-img2.png” ></li>
<li><img src=”img/lineup-img3.png” ></li>
</ul>
<li><img src=”img/lineup-img1.png” ></li>
<li><img src=”img/lineup-img2.png” ></li>
<li><img src=”img/lineup-img3.png” ></li>
</ul>
ぜひお試しください。
PAGE TOP