<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>

ぜひお試しください。

 

TOPICS

  1. 長年行きたいと思っていた和歌山県の熊野古道に行ってきました。熊野古道は、熊野本宮大社、熊野速玉大…
  2. あけましておめでとうございます。本年もどうぞよろしくお願いいたします。まだまだコロナ禍の…
  3. 滋賀県竜王町の三井アウトレットパーク近くにある登山口から竜王山こと鏡山を目指しました。その後、立…
  4. 最近ハマっている登山。今週登ってきた山で14座になりました。まだまだ初心者なので、雪や雨などが降…
  5. 今回は登山がこれで初となる長女を連れて親子3人で、近江富士という呼び方でも知られている三上山に登って…
にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ
PAGE TOP