<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

5月
30
10:00 AM 甲賀流ダンスコンテスト&2on2 フ... @ 甲賀流リアル忍者館 屋外
甲賀流ダンスコンテスト&2on2 フ... @ 甲賀流リアル忍者館 屋外
5月 30 @ 10:00 AM
甲賀流ダンスコンテスト&2on2 フリースタイルダンスバトル @ 甲賀流リアル忍者館 屋外
日時:2021年5月30日(日) 10:00~(雨天時延期) 場所:甲賀流リアル忍者館 屋外 優勝賞金:コンテスト 1万円 ・ 2on2 1万円 個人賞など、多数の賞があります エントリー方法(エントリー費:無料) 〇バトルエントリー(2on2 フリースタイルダンスバトル) 32組限定 チーム名/メンバー/レペゼン/ジャンルを明記の上、dancestudio_line@yahoo.co.jpへ 〇コンテストエントリー 20組限定 チーム名/メンバー/ジャンルを明記の上、dancestudio_line@yahoo.co.jpへ 問い合わせ (一社)甲賀市観光まちづくり協会 0748-60-2690
6月
12
1:30 PM 甲賀流忍者検定
甲賀流忍者検定
6月 12 @ 1:30 PM
甲賀流忍者検定
<場 所> 〇初級 忍の里プララ(甲賀市甲南町竜法師) 〇中級・上級 竜法師公民館(プララ近く) <受検料> 各級共に3,000円 <申込み> 5月6日(木)より メール又はFAXにて ※詳しくは、5月6日以降の甲賀市観光ガイドHPをご覧ください <定 員> 初級50名 中級30名 上級10名 (いづれも先着順に受付けます) ※コロナ感染拡大対策の為受検者数を制限しました

LOCAL LINK

PROMOTION VIDEO

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