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>

Output of my code

已经使用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>

我如何伸展导航栏的高度？

1 个答案: