html - 我怎样才能拉伸(stretch)我的导航栏高度？-6ren

html - 我怎样才能拉伸(stretch)我的导航栏高度？

转载作者：行者123 更新时间：2023-11-28 13:53:09

我在拉伸(stretch)导航栏的高度时遇到问题。我已经为属性高度添加了值，但它使导航栏稍微移到容器外。我该如何解决这个问题？

*{
    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 属性尝试拉伸(stretch)，但它什么也没做。有人可以帮我解决这个问题吗？

最佳答案

它没有按照您想要的方式扩展，因为您的 child ul 是绝对定位的，将其从文档流中分离出来。您可以通过将 ul float 到右侧并使用它的边距将其放置在远离右侧的位置来纠正此行为，就像我在下面所做的那样。您可能想在此处进一步调整样式，但由于我不确切知道您要做什么，所以我坚持关于为什么高度不适合您的具体问题:

/*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>

关于html - 我怎样才能拉伸(stretch)我的导航栏高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59347379/

文章推荐： html - 计算器 HTML

文章推荐： ios - 自定义条码扫描仪，无法传回扫描数据

文章推荐： css - 当使用页面宽度时，它会向下跳转而不是创建水平溢出

文章推荐： ios - 如何解决 iFrame 在 IOS/iphone 上不滚动的问题？

html - 拉伸(stretch)水平 div(中间 div 拉伸(stretch))
我想创建一个随页面宽度变化的页眉。我的标题由三部分组成，固定宽度的两侧和可拉伸(stretch)的中间部分。我使用 displa
html - 允许父 div 被一些 child 拉伸(stretch)，但不能被其他 child 拉伸(stretch)
我正在尝试在导航栏下方创建一列内容，以便内容的宽度与导航栏的宽度完全匹配。事实证明这比我预期的要困难。给定这样的东西: link
lua - 拉伸(stretch)物体
我有一个大小为 12*30 的字符串的图像。我想创建一个动画，让它给人一种拉伸(stretch)字符串的感觉。我通过缩放图像来做到这一点，但我面临的问题是缩放图像没有发生碰撞。它仅出现在原始图像大小的
Silverlight 拉伸(stretch)子元素以填充父容器？
在 Silverlight 中，如何拉伸(stretch) Line 的宽度以填充作为子元素的 StackPanel 的宽度？更喜欢 XAML 解决方案，而不是代码隐藏。这是我在 WPF 中的操作方法
qt - 拉伸(stretch)元素以包含所有子元素
QML 怎么可能？自动拉伸(stretch)元素以使其所有子元素都适合它？以及如何指定间距？例如，我想在文本周围有一个矩形。矩形应该有一些内部间距。如果我写以下内容，则矩形的大小为 0,0。 Rec
matplotlib:拉伸(stretch)图像以覆盖整个图形
我已经习惯了使用 matlab，现在正在尝试转换 matplotlib 和 numpy。 matplotlib 中是否有一种方法可以让您绘制的图像占据整个图形窗口。 import numpy as n
wpf - 拉伸(stretch)分离器不起作用
我有一个(简化的)2x2 网格，里面有三个控件。左控制在两行上延伸。
python - 拉伸(stretch)列表以适应彼此的尺寸
假设我有 3 个大小不匹配的列表，[3, 7, 6]、[12, 67, 89, 98] 和 [1, 2, 3, 4, 5, 6, 7]我想要一个函数来执行此操作: >>> stretch([3, 7,
c# - 拉伸(stretch)图像的宽度和高度
如果 Image 被 Stretched，我可以获取 Height 和 Width 吗>UniformToFill? 我尝试了 Width 和 Height 属性，但它们始终是 NaN。最佳答案如
android - 拉伸(stretch)微调器图标
当我为微调器使用我自己的背景主题时，它是拉伸(stretch)图标。我的微调器代码是: 我的 spinner.xml 是: 和我从 sdk 4 复制的图
c# - 纹理映射 - 拉伸(stretch)
我正在尝试在 OpenGL 中创建一个简单的 GUI。我创建了一张图片，以便我可以引用它并使解释更简单: 当我将按钮 (32x32) 的纹理应用到大小为 120x20 的四边形多边形(即不是矩形作为纹
Android textureView 拉伸(stretch)
SurfaceTexture 预览被拉伸(stretch)了!我正在开发一个 camera2 应用程序。每个设备都工作不好。视频和照片的预览被拉伸(stretch)。 public class Cam
android - 拉伸(stretch)图像按钮
我使用一些ImageButtons 创建了一个Android layout。我的布局在小屏幕(例如 3.6 英寸到 4.2 英寸)上运行良好，但是当我在 7 英寸或 9 英寸平板电脑上使用我的应用程序
android - 拉伸(stretch) GridView
我在拉伸(stretch) GridView 以适应显示宽度时遇到问题。任何人都知道如何解决这个问题？我希望 GridView 占据整个宽度，包括蓝色标记的字段(见下图)
Android:拉伸(stretch)位图以填满整个屏幕
我使用位图作为 Activity 的背景。自定义背景代码为: 但是它位于中间，并没有占据整个屏幕空间。我怎样才能让它填满所有可用空间？我尝试将宽度和高度设置为 fill_parent。谢谢最
iOS 拉伸(stretch)以适应所有屏幕尺寸？
所以我最近一直在为 iOS 开发应用程序，但遇到了一个难题。我正在制作一个迷你合成器，然后开始制作 GUI。我开始制作键盘(目前为 2 个 Octave )并测量了白键的大致长度。一切都很好，直到我在
html - 拉伸(stretch)图像
好的，所以我在 slider 内有一个图像，但它不能正确缩放。先小后伸，想一直伸到底，怎么实现？看一下截图(忽略第二张截图中的红色部分): 还有CSS: .slider-wrapper {
html - 拉伸(stretch)容器高度以适应屏幕
我有下面的 HTML，我希望容器 div 拉伸(stretch)到窗口的整个高度。这对 wine 有效，但是当您移除容器内的两个蓝色 div 时会发生什么？容器延伸到其中蓝色 div 的底部，但不会延
css - 拉伸(stretch)高度到容器
我正尝试在 this example 之后制作背景，但我需要嵌套 2 个容器。我的代码看起来像这样: XHTML:
SwiftUI:拉伸(stretch)背景图像以填充
这是关于用颜色填充背景。我正在构建 this project 的 SwiftUI 版本.这是一个选项卡式应用程序(测试工具)。 This is my Working Project 我要做的第一件事

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 我怎样才能拉伸(stretch)我的导航栏高度？