いつもお世話になっております。
・赤枠のdiv内は中央寄せ
・赤枠のdiv内にある、liは左寄せ
・レスポンシブ対応
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <style> /*-------------------------------------- Reset --------------------------------------*/ body { font-family:Meiryo,"MS PGothic",arial,sans-serif; margin:20px; padding:0; font-size:14px; color:#333; } h1,h2 { margin:0; padding:0; } p { margin:0; padding:0; } ul { list-style-type:none; margin:0; padding:0; } li { margin:0; padding:0; } dl,dt,dd { margin:0; padding:0; } img { border:0; vertical-align:bottom; } dd { margin:0; } a { text-decoration:none; color:#333; } article,aside,figure,header,footer,nav,section { display:block; } table { border-collapse:collapse; } /*-------------------------------------- Style --------------------------------------*/ .hoge { border:1px red solid; } .hoge ul { width:100%; max-width:960px; margin:0 auto; } .hoge ul li { display:inline-block; margin-bottom:5px; } </style> </head> <body> <div class="hoge"> <ul> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> <li><img src="https://placehold.jp/186x57.png"></li> </ul> </div> </body> </html>
恐れ入りますが、ご教示の程よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー