Question

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

它看起来像什么：

我希望浅蓝色从网页顶部延伸到菜单顶部，我希望两种颜色都横向跨越整个页面。

我的代码：

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

`

小提琴： https://jsfiddle.net/r8jcpcyf/

Answer 1

您应该删除<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>

Bakckground颜色没有填满整个容器

1 个答案: