将 Navbar BG 颜色扩展到容器外

Question

我的导航栏在容器内，我希望可以将黄色背景扩展到屏幕边缘，但将页面名称保留在容器内？我已经包含了一个 Codepen -

https://codepen.io/blairhunter/pen/XWNRMgb

html,body {
  background-color: #ededed;
  margin: auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-top:4px;
  padding-bottom:4px;
  padding-left: 0px;
  padding-right: 0px;
  overflow: hidden;
  background-color: yellow;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border-radius: 5px;
}

li a:hover:not(.active) {
  background-color: white;
}

.active {
  background-color: white;
}

.container-main {
  display: grid;
  padding-top:50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}

.container-main > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}

.container-nav {
  display: grid;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}

<body>

<div class="container-nav">
  <ul>
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

  <div class="container-main">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

</body>

Answer 1

你可以将它包裹在另一个容器中以扩展背景

<div class="yellow">
  <div class="container-nav">
    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</div>

.yellow{
 background-color: yellow;
}

Answer 2

我提出了一个使用伪classes :before 和:after 用于class .container-nav 的解决方案。执行以下操作：

将 position: relative; 添加到 .container-nav。

并将这些具有绝对定位的伪class添加到您的css。

html,
body {
    background-color: #ededed;
    margin: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
    background-color: yellow;
}

li {
    float: left;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    border-radius: 5px;
}

li a:hover:not(.active) {
    background-color: white;
}

.active {
    background-color: white;
}

.container-main {
    display: grid;
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
}

.container-main > div {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid black;
    text-align: center;
    font-size: 30px;
}

.container-nav {
    display: grid;
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
    position: relative; /*add this it*/
}

/*add this it************/

.container-nav:before {
    content: "";
    position: absolute;
    left: -100%;
    bottom: 0;
    top: 0;
    right: 100%;
    background-color: yellow;
}

.container-nav:after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    top: 0;
    right: -100%;
    background-color: yellow;
}

<body>
    <div class="container-nav">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <div class="container-main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

将 Navbar BG 颜色扩展到容器外

Extending Navbar BG color outside of container

html

css

containers

background-color

navbar