如何拉伸我的導航欄高度？

Question

我在拉伸導航欄的高度時遇到問題。 我已經為屬性高度添加了值，但它使導航欄稍微移動到容器的外部。 我該如何解決這個問題？

 *{ margin:0; padding:0; } body { background-image: url("/images/ilhas.jpg"); background-size: cover; } nav { width: 100%; background-color:rgb(3, 129, 14); text-align: center; position:relative; padding:0 0 10% 0; } nav ul { float: left; text-align: center; width:70%; position:absolute; bottom:0; right:5%; } nav ul li { /*DROPDOWN*/ float: left; list-style:none; position: relative; width:10%; background-color:rgb(230, 179, 179); } nav ul li a{ display:block; font-family: arial; color: #222; font-size:70%; padding:22px 14px; text-decoration: none; margin-right: auto; margin-left: auto; } nav ul li ul{ display:none; position:block; background-color:#fff; border-radius:20px 20px; } nav ul li:hover ul { display:block; } nav ul li ul li{ width:100%; } nav ul li ul li a{ padding:8px 4px; } nav ul li ul li a:hover { background-color:#f3f3f3; } #home { background-color:#00c3ff; } #ilhaSantaMaria { background-color:#fffb00; } #ilhaSaoMiguel { background-color:#33ff00; } #ilhaTerceira { background-color:#ff00d4; } #ilhaGraciosa { background-color:#ffffff; } #ilhaSaoJorge { background-color:#f593c4; } #ilhaPico { background-color:#5a5a5a; } #ilhaFaial { background-color:#004458; } #ilhaFlores { background-color:#00ff2a; } #ilhaCorvo { background-color:#4e3300; }

 <nav> <ul> <li id="home"><a class="active" href="index.html">Home</a></li> <li id="ilhaSantaMaria"><a href="ilhaSantaMaria.html">Santa Maria</a> <ul> <li><a href="ilhaSantaMaria.html">Digital art</a></li> <li><a href="ilhaSantaMaria.html">Video production</a></li> <li><a href="ilhaSantaMaria.html">Web development</a></li> </ul> </li> <li id="ilhaSaoMiguel"><a href="ilhaSaoMiguel.html">São Miguel</a> <ul> <li><a href="ilhaSaoMiguel.html">Digital art</a></li> <li><a href="ilhaSaoMiguel.html">Video production</a></li> <li><a href="ilhaSaoMiguel.html">Web development</a></li> </ul> </li> <li id="ilhaTerceira"><a href="ilhaTerceira.html">Terceira</a> <ul> <li><a href="ilhaTerceira.html">Digital art</a></li> <li><a href="ilhaTerceira.html">Video production</a></li> <li><a href="ilhaTerceira.html">Web development</a></li> </ul> </li> <li id="ilhaGraciosa"><a href="ilhaGraciosa.html">Graciosa</a> <ul> <li><a href="ilhaGraciosa.html">Digital art</a></li> <li><a href="ilhaGraciosa.html">Video production</a></li> <li><a href="ilhaGraciosa.html">Web development</a></li> </ul> </li> <li id="ilhaSaoJorge"><a href="ilhaSaoJorge.html">São Jorge</a> <ul> <li><a href="ilhaSaoJorge.html">Digital art</a></li> <li><a href="ilhaSaoJorge.html">Video production</a></li> <li><a href="ilhaSaoJorge.html">Web development</a></li> </ul> </li> <li id="ilhaPico"><a href="ilhaPico.html">Pico</a> <ul> <li><a href="ilhaPico.html">Digital art</a></li> <li><a href="ilhaPico.html">Video production</a></li> <li><a href="ilhaPico.html">Web development</a></li> </ul> </li> <li id="ilhaFaial"><a href="ilhaFaial.html">Faial</a> <ul> <li><a href="ilhaFaial.html">Digital art</a></li> <li><a href="ilhaFaial.html">Video production</a></li> <li><a href="ilhaFaial.html">Web development</a></li> </ul> </li> <li id="ilhaFlores"><a href="ilhaFlores.html">Flores</a> <ul> <li><a href="ilhaFlores.html">Digital art</a></li> <li><a href="ilhaFlores.html">Video production</a></li> <li><a href="ilhaFlores.html">Web development</a></li> </ul> </li> <li id="ilhaCorvo"><a href="ilhaCorvo.html">Corvo</a> <ul> <li><a href="ilhaCorvo.html">Digital art</a></li> <li><a href="ilhaCorvo.html">Video production</a></li> <li><a href="ilhaCorvo.html">Web development</a></li> </ul> </li> </ul> </nav>

我的代碼的輸出

已經使用 height 屬性嘗試拉伸，但它沒有做任何事情。 有人可以幫我解決這個問題嗎？

Answer 1

它沒有按照您想要的方式擴展，因為您的孩子ul是絕對定位的，將其與文檔流程分開。 您可以通過將ul向右浮動並使用它的邊距將其放置在遠離右側的方式來糾正此行為，如下所示。 您可能想要進一步調整此處的樣式，但由於我不確切知道您要做什么，因此我堅持有關為什么高度不適合您的具體問題：

 /*WILSON*/ * { margin: 0; padding: 0; } body { background-image: url("/images/ilhas.jpg"); background-size: cover; } nav { float: left; width: 100%; background-color: rgb(3, 129, 14); text-align: center; padding: 0 0 10% 0; } nav ul { float: right; margin-right: 5%; text-align: center; width: 70%; } nav ul li { /*DROPDOWN*/ float: left; list-style: none; position: relative; width: 10%; background-color: rgb(230, 179, 179); } nav ul li a { display: block; font-family: arial; color: #222; font-size: 70%; padding: 22px 14px; text-decoration: none; margin-right: auto; margin-left: auto; } nav ul li ul { display: none; position: block; background-color: #fff; border-radius: 20px 20px; } nav ul li:hover ul { display: block; } nav ul li ul li { width: 100%; } nav ul li ul li a { padding: 8px 4px; } nav ul li ul li a:hover { background-color: #f3f3f3; } #home { background-color: #00c3ff; } #ilhaSantaMaria { background-color: #fffb00; } #ilhaSaoMiguel { background-color: #33ff00; } #ilhaTerceira { background-color: #ff00d4; } #ilhaGraciosa { background-color: #ffffff; } #ilhaSaoJorge { background-color: #f593c4; } #ilhaPico { background-color: #5a5a5a; } #ilhaFaial { background-color: #004458; } #ilhaFlores { background-color: #00ff2a; } #ilhaCorvo { background-color: #4e3300; }

 <!DOCTYPE html> <html> <head> <meta name="author" content="João Lopes, Wilson Lima, Cristina Santos"> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" lang="pt"> <meta name="viewport" content="width=device-width" initial-scale="1.0"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="O que conhecer e fazer no arquipelago dos Açores"> <meta name="keywords" content="Açores, Gastronomia, Transportes..."> <!--TODO--> <link rel="stylesheet" type="text/css" href="CSS/styles.css"> <link rel="shortcut icon" type="image/jpeg" href="icons/azoresIcon.jpeg" /> <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> --> <title>Esquecidos no Atlântico</title> </head> <body> <script type="text/javascript" src="js/javascript.js"></script> <nav> <ul> <li id="home"><a class="active" href="index.html">Home</a></li> <li id="ilhaSantaMaria"><a href="ilhaSantaMaria.html">Santa Maria</a> <ul> <li><a href="ilhaSantaMaria.html">Digital art</a></li> <li><a href="ilhaSantaMaria.html">Video production</a></li> <li><a href="ilhaSantaMaria.html">Web development</a></li> </ul> </li> <li id="ilhaSaoMiguel"><a href="ilhaSaoMiguel.html">São Miguel</a> <ul> <li><a href="ilhaSaoMiguel.html">Digital art</a></li> <li><a href="ilhaSaoMiguel.html">Video production</a></li> <li><a href="ilhaSaoMiguel.html">Web development</a></li> </ul> </li> <li id="ilhaTerceira"><a href="ilhaTerceira.html">Terceira</a> <ul> <li><a href="ilhaTerceira.html">Digital art</a></li> <li><a href="ilhaTerceira.html">Video production</a></li> <li><a href="ilhaTerceira.html">Web development</a></li> </ul> </li> <li id="ilhaGraciosa"><a href="ilhaGraciosa.html">Graciosa</a> <ul> <li><a href="ilhaGraciosa.html">Digital art</a></li> <li><a href="ilhaGraciosa.html">Video production</a></li> <li><a href="ilhaGraciosa.html">Web development</a></li> </ul> </li> <li id="ilhaSaoJorge"><a href="ilhaSaoJorge.html">São Jorge</a> <ul> <li><a href="ilhaSaoJorge.html">Digital art</a></li> <li><a href="ilhaSaoJorge.html">Video production</a></li> <li><a href="ilhaSaoJorge.html">Web development</a></li> </ul> </li> <li id="ilhaPico"><a href="ilhaPico.html">Pico</a> <ul> <li><a href="ilhaPico.html">Digital art</a></li> <li><a href="ilhaPico.html">Video production</a></li> <li><a href="ilhaPico.html">Web development</a></li> </ul> </li> <li id="ilhaFaial"><a href="ilhaFaial.html">Faial</a> <ul> <li><a href="ilhaFaial.html">Digital art</a></li> <li><a href="ilhaFaial.html">Video production</a></li> <li><a href="ilhaFaial.html">Web development</a></li> </ul> </li> <li id="ilhaFlores"><a href="ilhaFlores.html">Flores</a> <ul> <li><a href="ilhaFlores.html">Digital art</a></li> <li><a href="ilhaFlores.html">Video production</a></li> <li><a href="ilhaFlores.html">Web development</a></li> </ul> </li> <li id="ilhaCorvo"><a href="ilhaCorvo.html">Corvo</a> <ul> <li><a href="ilhaCorvo.html">Digital art</a></li> <li><a href="ilhaCorvo.html">Video production</a></li> <li><a href="ilhaCorvo.html">Web development</a></li> </ul> </li> </ul> </nav> </body> </html>