下記のようなコードを書いてみたのですがヘッダーの.nav liの枠の下側が切れてしまいスクロールになってしまっています。
objectとして読み込んだものを内容の高さに合うよう設定するにはどのようにしたら良いのでしょうか?
よろしくお願いします。
@charset "UTF-8"; .wrapper { margin: 0 auto; max-width: 1280px; } .header { width: 100%; } .nav ul { padding: 0px; } .nav li { display: inline-block; list-style-type: none; width: 18%; text-align: center; margin: 0 1px; vertical-align: middle; border: solid 2px #444444; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <a href="index.html" target="_parent"><img class="logo" src="img/logo.png" alt="logo">logo</a> <nav class="nav"> <ul> <li><a href="index.html" target="_parent">A</a></li> <li><a href="b.html" target="_parent">B</a></li> <li><a href="c.html" target="_parent">C</a></li> <li><a href="d.html" target="_parent">D</a></li> <li><a href="e.html" target="_parent">E</a></li> </ul> </nav> </header> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my</title> <link rel="icon" href="img/favicon.png"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <object class ="header" type="text/html" data="header.html"></object> <main> </main> <object class ="footer" type="text/html" data="footer.html"></object> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー