<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

12月
13
全日 信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
12月 13 – 12月 24 全日
信楽高原鐵道サンタ列車2019 @ 信楽高原鐵道
期間:12月13日(金)~12月24日(火)※要予約 時間:信楽駅9:46発→貴生川駅10:09着 貴生川駅10:24発→信楽駅10:48着 信楽駅10:54発→貴生川駅11:17着 貴生川駅11:24発→信楽駅10:48着 料金:大人940円、小人480円(大人一人につき未就学児2名無料) サンタさんと遊んでプレゼントをもらおう! 予約先:信楽高原鐵道株式会社 TEL0748-82-4366
12月
21
全日 NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
12月 21 2019 – 3月 28 2020 全日
NHK連続テレビ小説「スカーレット」展 @ 信楽伝統産業会館
会期:12月21日(土)~令和2年3月28日(土)9:00~17:00 場所:信楽伝統産業会館(甲賀市信楽町長野1142) ※入場無料 焼き物の里・信楽を舞台に、女性陶芸家の波乱万丈な人生を描く「スカーレット」。 写真や収録に使用した小道具、衣装、フォトスポット等でその魅力をご紹介します。 問い合わせ:信楽伝統産業会館 TEL0748-82-2345
1月
11
全日 NHK連続テレビ小説「スカーレット... @ 土山SA下り
NHK連続テレビ小説「スカーレット... @ 土山SA下り
1月 11 – 3月 28 全日
NHK連続テレビ小説「スカーレット」パネル展 @ 土山SA下り
期間:1月11日(土)~3月28日(土)の土日祝のみ 場所:新名神高速道路土山サービスエリア下り線側観光案内所ブース 甲賀市を舞台に女性陶芸家の人生を描く「スカーレット」。 1月からもますます盛り上がるドラマを紹介するパネル展示やVTR上映をします。

LOCAL LINK

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