クリエイター：コーディング備忘録ブログ

RSS

コーディング

リストの中で画像を横並べ

2018.05.24

リストの中でタイトルと画像を並べたいとき

リストタグの中でhタグとulタグを使用し、ulタグの中でリストタグを用いてimgタグを使用します。
また、imgに用いているリストタグをインライン要素にすることで横並びにします。

<html>
<li class="payment_big card clear">
   <h4>クレジットカード</h4>
   <ul class="iconWrap">
	<li class=""><img src="" alt=""></li>
	<li class=""><img src="" alt=""></li>
	<li class=""><img src="" alt=""></li>
    </ul>
</li>

<style>
.iconWrap li {
    display: inline;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<html>

<li class="payment_big card clear">

<h4>クレジットカード</h4>

<ul class="iconWrap">

<li class=""><img src="" alt=""></li>

<li class=""><img src="" alt=""></li>

<li class=""><img src="" alt=""></li>

</ul>

</li>

<style>

.iconWrap li {

display: inline;

}

【特徴】
・リストタグの中でタイトルと画像を区別できる
・ulとliでのシンプルかつキレイなコードが書ける
・スタイルもシンプル

この記事を見た人は次の記事も見ています。

cssでの絶対値

前の記事

コンテナーとコンテンツを分離

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

font-size

2017.02.13

コーディング

はじめまして。ブログバトンタッチ。

2019.06.27

コーディング

wp 複数サイト運用

2018.04.16

コーディング

ショートカットキーの話

2021.02.19

コーディング

否定疑似クラス「:not」

2018.03.12

コーディング

Google キーワードプランナーを使って数値予測をする

2017.03.31