横に並べるレスポンシブ

テンプレ
  • 　　
    テキスト

  • 　　
    テキスト

html

1
2
3
4
5
6
7
8
9
10
<div class="photoul">
<ul>
<li>
<img src="/web/wp-content/uploads/2019/11/photoul-300x198.jpg" alt="　　" /><br />テキスト
</li>
<li>
<img src="/web/wp-content/uploads/2019/11/photoul-300x198.jpg" alt="　　" /><br />テキスト
</li>
</ul>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.photoul{
margin:10px auto;
text-align:center;
}
 
.photoul ul{
list-style-type:none;
margin:0;
padding:0;
}
 
.photoul li{
margin:10px;
padding:0;
display:inline-block;
text-align:left;
}

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

▲