<CSS>floatを使わずに横並びにする方法

普段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;
}

 
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>

ぜひお試しください。

 
 滋賀県ランキングにほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ

EVENT

直近のイベントはありません。

LOCAL LINK

にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ
PAGE TOP