（緊急）今の形から横並びにするにはどのような設定が必要ですか？
ロゴとメニューを横並びにしたいです
ぜひやり方をご存じの方教えて欲しいです！よろしくお願いします！
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>シルエット</title> </head> <body> <div class="header"> <h1> <img src="https://onl.sc/bZskhdc" height="100"> </h1> <nav class="my-parts"> <ul> <li><a href="#">ホーム<span>HOME</span></a></li> <li><a href="#">お知らせ<span>NEWS</span></a></li> <li><a href="#">ブログ<span>BLOG</span></a></li> <li><a href="#">概要<span>ABOUT</span></a></li> <li><a href="#">お問い合わせ<span>CONTACT</span></a></li> </ul> </nav> </div> </body> </html>```
style.css
.header h1{ color: purple; font-size: 50px; } .my-parts ul { list-style: none; margin: 0; padding: 0; } .my-parts ul::after { content: ""; display: block; clear: both; } .my-parts ul li { float: left; width: 20%; box-sizing: border-box; } .my-parts ul li a { display: block; padding: .4em .8em; text-decoration: none; color: #333; background: #fff; text-align: center; } .my-parts ul li a:hover { background: #eee; } .my-parts ul li span { display: block; font-size: .75em; }
0 コメント