Question

我在修改移动设备导航栏方面遇到了问题。我希望导航栏忽略其父级 inner-wrapper 宽度80%，并使用全宽100%。

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

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

＆＃13;
＆＃13;
width
＆＃13;
100%
＆＃13;
＆＃13;
＆＃13;

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，它可能会导致不需要的滚动条和/或当其父/身体有滚动条时使元素以不受欢迎的方式运行

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

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

请注意，在下面的示例中，我将其着色为浅灰色，以便了解它如何定位

Stack snippet

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

忽略父divs宽度

3 个答案: