忽略父 div 宽度

Question

我在修改移动设备的导航栏时遇到了问题。我希望导航栏忽略其父 div inner-wrapper 宽度 80% 并使用 100%.[= 的完整宽度21=]

我能想到的最合乎逻辑的解决方案是将 header: relative、width: 100% 和 header li 设置为 absolute 的 width 为 100%。但是，这似乎不起作用。

我希望每个导航都具有屏幕的整个宽度，而不是其父包装器的整个宽度。

.header {
  background-color: #FFB6C1;
  color: black;
  overflow: hidden;
  position: relative;
}

.inner-wrapper {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
}

.header h2 {
  float: left;
  font-family: 'Pacifico', sans-serif;
  font-size: 30px;
}

.header h3 {
  padding-top: 5px;
  font-family: 'Petit Formal Script';
  clear: both;
  font-weight: 700;
}

.header span {
  font-weight: bolder;
}

.header ul {
  float: right;
  margin-right: 10%
}

.header ul li {
  list-style: none;
  display: inline-block;
  font-family: 'Podkova', sans-serif;
  margin-right: 20px;
  font-weight: bold;
}
/* Navigation Menu click for mobile */

.mobile-menu {
  padding: 0;
  margin: 0;
  display: none;
}
/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 414px) {
  /* Styles */
  /* Display flex to change the ordering of HTML elemtns*/
  .inner-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
  }
  .header-title {
    order: 1;
  }
  .header-description {
    order: 2;
  }
  .dropdown {
    order: 3;
  }
  .header-li {
    display: none;
    position: absolute;
    width: 100%;
  }
  .header ul {
    float: none;
    margin-right: 0%;
  }
  .mobile-menu {
    padding: 0;
    margin: 0;
    display: initial;
    cursor: pointer;
  }
  .header ul li {
    width: 100%;
    background-color: green;
    padding-top: 20px;
  }
  .header {
    position: relative;
    width: 100%;
  }
}

<!-- Header and Navigation -->
<div class="header">
  <div class="inner-wrapper">
    <h2 class="header-title">text</h2>
    <div class="dropdown">
      <div class="mobile-menu">
        <p align="right">Menu</p>
      </div>
      <ul class="header-li">
        <li>About me</li>
        <li>Progress</li>
        <li>Food</li>
        <li>Contact</li>
      </ul>
    </div>
    <h3 class="header-description">text</span></h3>
  </div>
</div>

Answer 1

这个詹姆斯怎么样？

.theContainer {
  width: 200px;
  height: 200px;
  background-color: gray;
  position: relative;
}

.theParent {
  width: 80%;
  height: 150px;
  background-color: lightgray;
}

.theChild {
  width: 100%;
  background-color: lightgreen;
  position: absolute;
}

<div class="theContainer">
  <div class="theParent">
    This is the parent trying to restrict the child to 80% width.
    <div class="theChild">
      This is the child with 100% width ignoring parent.
    </div>
  </div>
</div>

Answer 2

如果您希望导航具有全屏宽度，请在子项上使用 width: 100vw;。这意味着视图宽度的 100%

Answer 3

使用视口单位最初似乎是个好主意，但在这种情况下没有必要，也没有用，因为 header 使用 overflow: hidden.

请注意，如果您开始使用 100vw，它可能会导致不需要的滚动条 and/or 使元素在其 parent/body 有滚动条时以不需要的方式运行

由于 header-li 与 header 相关（最近的祖先的位置不是 static），只需使用 100% 和 transform: translate 来定位它。

.header-li {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: lime;
}

请注意，下面的示例我将其涂成浅灰色，这样您就可以看到它是如何定位自己的

堆栈片段

.header {
  background-color: #FFB6C1;
  color: black;
  overflow: hidden;
  position: relative;
}

.inner-wrapper {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
}

.header h2 {
  float: left;
  font-family: 'Pacifico', sans-serif;
  font-size: 30px;
}

.header h3 {
  padding-top: 5px;
  font-family: 'Petit Formal Script';
  clear: both;
  font-weight: 700;
}

.header span {
  font-weight: bolder;
}

.header ul {
  float: right;
  margin-right: 10%
}

.header ul li {
  list-style: none;
  display: inline-block;
  font-family: 'Podkova', sans-serif;
  margin-right: 20px;
  font-weight: bold;
}

.header-li {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: lightgray;
}


/* Navigation Menu click for mobile */

.mobile-menu {
  padding: 0;
  margin: 0;
  display: none;
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 414px) {
  /* Styles */
  /* Display flex to change the ordering of HTML elemtns*/
  .inner-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
  }
  .header-title {
    order: 1;
  }
  .header-description {
    order: 2;
  }
  .dropdown {
    order: 3;
  }
  .header-li {
    display: none;
    position: absolute;
    width: 100%;
  }
  .header ul {
    float: none;
    margin-right: 0%;
  }
  .mobile-menu {
    padding: 0;
    margin: 0;
    display: initial;
    cursor: pointer;
  }
  .header ul li {
    width: 100%;
    background-color: green;
    padding-top: 20px;
  }
  .header {
    position: relative;
    width: 100%;
  }
}

<!-- Header and Navigation -->
<div class="header">
  <div class="inner-wrapper">
    <h2 class="header-title">text</h2>
    <div class="dropdown">
      <div class="mobile-menu">
        <p align="right">Menu</p>
      </div>
      <ul class="header-li">
        <li>About me</li>
        <li>Progress</li>
        <li>Food</li>
        <li>Contact</li>
      </ul>
    </div>
    <h3 class="header-description"><span>text</span></h3>
  </div>
</div>

如果您希望 header-li 也扩展到 header 之外，您将需要删除 overflow: hidden，使用 100vw 并删除 padding ul 默认设置（否则你会得到一个卷轴）

.header {
  background-color: #FFB6C1;
  color: black;
  position: relative;
}

.inner-wrapper {
  width: 80%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
}

.header h2 {
  float: left;
  font-family: 'Pacifico', sans-serif;
  font-size: 30px;
}

.header h3 {
  padding-top: 5px;
  font-family: 'Petit Formal Script';
  clear: both;
  font-weight: 700;
}

.header span {
  font-weight: bolder;
}

.header ul {
  float: right;
  margin-right: 10%
}

.header ul li {
  list-style: none;
  display: inline-block;
  font-family: 'Podkova', sans-serif;
  margin-right: 20px;
  font-weight: bold;
}

.header-li {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: lightgray;
  padding: 0;
}


/* Navigation Menu click for mobile */

.mobile-menu {
  padding: 0;
  margin: 0;
  display: none;
}


/* Smartphones (portrait) ----------- */

@media only screen and (max-width: 414px) {
  /* Styles */
  /* Display flex to change the ordering of HTML elemtns*/
  .inner-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 0px;
  }
  .header-title {
    order: 1;
  }
  .header-description {
    order: 2;
  }
  .dropdown {
    order: 3;
  }
  .header-li {
    display: none;
    position: absolute;
    width: 100%;
  }
  .header ul {
    float: none;
    margin-right: 0%;
  }
  .mobile-menu {
    padding: 0;
    margin: 0;
    display: initial;
    cursor: pointer;
  }
  .header ul li {
    width: 100%;
    background-color: green;
    padding-top: 20px;
  }
  .header {
    position: relative;
    width: 100%;
  }
}

<!-- Header and Navigation -->
<div class="header">
  <div class="inner-wrapper">
    <h2 class="header-title">text</h2>
    <div class="dropdown">
      <div class="mobile-menu">
        <p align="right">Menu</p>
      </div>
      <ul class="header-li">
        <li>About me</li>
        <li>Progress</li>
        <li>Food</li>
        <li>Contact</li>
      </ul>
    </div>
    <h3 class="header-description"><span>text</span></h3>
  </div>
</div>

忽略父 div 宽度

Ignore parent divs width

html

css

css-float

flexbox