<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. 平素は、当協会の事業推進に格別のご理解・ご協力を賜り厚く御礼申し上げます。さて、2017…
  3. 久々の遠征&#x2757;&#xfe0f;前々から行きたいと思っていたアルプスの女王「燕…
  4. 盆が空けて人が少ない時期にと白山に行ってきましたが、大勢のハイカーで下山時には駐車場が満車状…
  5. 同級生3人と赤岳に挑戦してきました&#x203c;&#xfe0f;彼らはベテランで足を引っ張らな…
にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ
PAGE TOP