<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

9月
1
全日 秋季特別展MIHO MUSEUMコレクショ... @ MIHO MUSEUM
秋季特別展MIHO MUSEUMコレクショ... @ MIHO MUSEUM
9月 1 – 12月 13 全日
秋季特別展MIHO MUSEUMコレクションの形成-日本絵画を中心に- @ MIHO MUSEUM
<期間> 9月1日(火)~12月13日(日)10:00~16:00(入館は15:00まで) 月曜休館 ※9月21日(祝・月)、11月23日(祝・月)は開館、9月23日(水)、11月24日(火)は休館 <場所> MIHO MUSEUM 入館には事前予約が必要です。 詳しくはこちら→http://www.miho.or.jp/

LOCAL LINK

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