在容器外扩展导航栏 BG 颜色 [重复]答案

【问题标题】：Extending Navbar BG color outside of container [duplicate]在容器外扩展导航栏 BG 颜色 [重复]
【发布时间】：2021-05-19 23:09:09
【问题描述】：

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

【问题讨论】：

标签： html css containers navbar background-color

【解决方案1】：

我建议使用伪类:before 和:after 用于类.container-nav 的解决方案。执行以下操作：

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

并将这些具有绝对定位的伪类添加到您的 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>

【讨论】：

魔术！干杯!尽情享受一天:)
@B.Hunter，谢谢。乐于助人:)

【解决方案2】：

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

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

【讨论】：

我试试看！真的很感激，谢谢:)