html - 背景颜色未填满整个容器-6ren

html - 背景颜色未填满整个容器

转载作者：太空宇宙更新时间：2023-11-04 03:06:02

24

4

我正在制作的导航栏的背景颜色有问题:它没有填满整个容器。

它看起来像什么:

我希望较浅的蓝色从网页顶部延伸到菜单顶部，并且我希望这两种颜色水平跨越整个页面。

我的代码:

<html>

    <head>
        <title>
        Patrick's Website: Home
    </title>

    <style>
        header {
            color: white;
            font-family: "Arial", serif;
            max-width: 100%;
            background-color: #3366FF;
        }

        .items {
            float: left;
            width: 100%;
            padding: 0;
            margin: 0;
            list-style-type: none;
            display: inline;
        }

        .item {
            float: left;
            font-family: "Arial", serif;
            height: 3em;
            text-decoration: none;
            background-color: #0000FF;
            padding: 0.2em 0.6em;
            color: white;
        }

        .item:hover {
            background-color: #3366FF;
        }
    </style>
</head>

<body>
    <header>

        <h1>
            Website
        </h1>

        <nav>
            <ul class="items">
                <li> <a href="" class="item"> Link One </a> </li>
                <li> <a href="" class="item"> Link two </a> </li>
                <li> <a href="" class="item"> Link three </a> </li>
                <li> <a href="" class="item"> Link four </a> </li>
            </ul>
        </nav>

    </header>

    <hr>

    <main>

    </main>

</body>

`

fiddle : https://jsfiddle.net/r8jcpcyf/

最佳答案

您应该删除 <h1> 上的边距并在其位置使用填充，并为 <ul> 的背景着色如果您希望颜色跨越页面的宽度。

header {
  color: white;
  font-family: "Arial", serif;
  max-width: 100%;
  background-color: #3366FF;
}
.items {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: inline;
}
.item {
  float: left;
  font-family: "Arial", serif;
  height: 3em;
  text-decoration: none;
  background-color: #0000FF;
  padding: 0.2em 0.6em;
  color: white;
}
.item:hover {
  background-color: #3366FF;
}
h1 {
  margin: 0;
  padding: 20px 0;
}
ul {
  background: #00f;
}

<header>
  <h1>
            Website
        </h1>

  <nav>
    <ul class="items">
      <li> <a href="" class="item"> Link One </a> 
      </li>
      <li> <a href="" class="item"> Link two </a> 
      </li>
      <li> <a href="" class="item"> Link three </a> 
      </li>
      <li> <a href="" class="item"> Link four </a> 
      </li>
    </ul>
  </nav>
</header>
<hr>
<main></main>

关于html - 背景颜色未填满整个容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30445501/

24

4

0

文章推荐： c++ - 为什么 "SHOW PROCESSLIST"不给 Host IP？

文章推荐： javascript - 如何在aws lambda函数中使用setInterval

文章推荐： javascript - fs.readdir 在函数内部调用时返回 undefined

Java 堆已被 JDBC4PreparedStatement 填满
我正在运行 Play! 2.3 使用 Akka 的多线程应用程序。每个线程访问 MySQL 数据库并运行一些计算。每次我运行一组这样的任务时，应用程序的内存占用量都会增加，这主要是由于 JDBC4Pr
JavaScript — 数组被一堆 "undefined"填满
我是 JavaScript 新手，正在尝试实现选择排序来亲自接触数组(注意:我知道有一个内置的排序函数)。不过，我遇到了一些奇怪的行为。这是我的代码: function selectionSort(
html - 填满 1 行上的所有内容
我正在使用 unsemantic grid创建我的布局。好吧，我有一个容器，其中有一个标签和一个输入文本。标签的宽度为 20% 然后 margin-rightof 1em 然后我想让容器中的其余空间由
填满 P 本地运行队列的 Go Scheduler？
看看这张取自 morsmachine.dk/go-scheduler 的著名图片灰名单是 P 的本地运行队列。如果此队列变空，它们将被全局运行队列中的 go routines 填充。问题是，谁来填
macos - Docker 填满 macOS 上的存储空间
(帖子创建于 2016 年 10 月 5 日) 我注意到每次运行图像并删除它时，我的系统都不会恢复到原来的可用空间量。我应用于容器的生命周期是: > docker build ... > docke
java - 如果 permgen 填满，GC 会运行吗？
我有一个应用程序，它在启动时运行两个或三个完整的 GC。有很多堆空间，不需要运行任何 GC(minor 或 full)。然而，在 gc 日志中，我可以看到 permgen 被填满，然后立即运行完整
ios - 如何让 VStack 填满 SwiftUI 中的屏幕宽度
我正在尝试制作可视化 VStack 属性的 VStack 示例应用但是我的 VStack 无法填满屏幕的宽度我在互联网上尝试了很多解决方案(frame modifier、HStack with S
html - CSS:填满屏幕其余部分的 iFrame 未被具有恒定大小的 div 填满
[已解决] 所以我在页面顶部有一个高度恒定的 div，我希望在它下面有一个 iFrame 来填充页面的其余部分。 Google Images 和 LinkedIn 做的事情非常相似参见:http:/
css - 让 child 填满 parent ，而不会变得 react 迟钝
我正在尝试使我的标题框与我的图像大小相同，同时又不失去 flex-slider 的响应能力，有什么建议吗？ http://jsfiddle.net/bmBnF/10/ 疯狂的K 最佳答案我通过将其设
html - 将 child 放在 parent 的底部，直到动态 sibling 填满 parent
我有一个元素是的兄弟元素动态填充 hello 我想要固定在屏幕底部直到动态 s 要求将其向下推到 View 下方。我尝试了以下但无法获得我想要的结果。该元素位

首页

博学

6Ren·AI

商城

html - 背景颜色未填满整个容器