画像を横並びにしたいです。
簡単なホームページを作っている最中です。しかし、画像を一列に表示しようとしても二列になってしまいます。画像の大きさを変えてもかわりません。どうしたらいいでしょうか。
発生している問題・エラーメッセージ
エラーメッセージ なし ### 該当のソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="header"> <div class="header-logo"> すずめの世界 </div> <div class="header-list"> <ul> <li>プロフィール</li> <li>Twitter</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <h1 class="main-logo">HELLO SUZUME WORLD</h1> <h2>すずめの世界へようこそ</h2> <div class="contents"> <h3>すずめを知ろう</h3> <div class="contents-items"> <img src="image/snow_on_suzume.jpg"> </div> <div class="contents-items"> <img src="image/susume_winter.jpg"> </div> <div class="contents-items"> <img src="image/suzume1.jpg"> </div> <div class="contents-items"> <img src="image/suzume2.jpg"> </div> </div> </div> </body> </html> css .header { background: #7fffd4; height: 60px; color: white; } .header-logo { font-size: 30px; float: left; padding: 10px 40px; } .header-list { font-size: 20px; } .header-list li { float: left; padding: 20px 20px; list-style: none; } .main { padding: 20px 40px 0 40px; } .main-logo { font-size: 52px; margin-bottom: 5px; } .main h2 { font-size: 28px; margin-top: 5px; } .contents-items img { width: 25%; height: 25%; } .contents-items { float: left; }
回答1件
あなたの回答
tips
プレビュー