CSS 全屏大小的技巧 div 将我的列表项推到右边

Question

我正在使用这个技巧让我的 div 横跨整个屏幕

  left: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
 max-width: 100vw;
 position: relative;
 right: 50%;
 width: 100vw;

然而，由于某种原因，这导致我的导航栏中的列表项被推到右侧。我无法弄清楚是什么在推动他们或他们被推到多远。

有没有更好的方法来跨越 div 全屏而不破坏我的元素？有没有我似乎找不到的简单修复方法？

body {
  background-color: #333335;
}

#logoCont {
  background-color: #3c9ea7;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  top: -1vh;
  padding-top: 2vh;
  margin-bottom: 0px;
}

#logo {
  max-width: 20vw;
  max-height: 10vh;
  padding-left: 10px;
}

#navBar {
  display: flex;
  justify-content: center;
  flex-direction: row;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  background-color: red;
  height: 4vh;
  align-content: center;
  top: -1vh;
  margin-top: 0px;
}

.navItem {
  text-align: center;
  list-style: none;
  height: 100%;
  position: relative;
  line-height: 4vh;
  flex-grow: 1;
  margin: 0px;
  padding: 0px;
}

<body>

  <div id="nav">

    <div id="logoCont">
      <img src="images/logo.png" id="logo">
    </div>

    <ul id="navBar">
      <div id="home" class="navItem">Home</div>
      <div id="events" class="navItem">Events</div>
      <div id="price" class="navItem">Pricing</div>
    </ul>

  </div>

</body>

Answer 1

将 padding-left: 0; padding-right: 0; 添加到您的 ul 以重置默认填充：

body {
  background-color: #333335;
}

#logoCont {
  background-color: #3c9ea7;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  top: -1vh;
  padding-top: 2vh;
  margin-bottom: 0px;
}

#logo {
  max-width: 20vw;
  max-height: 10vh;
  padding-left: 10px;
}

#navBar {
  display: flex;
  justify-content: center;
  flex-direction: row;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
  background-color: red;
  height: 4vh;
  align-content: center;
  top: -1vh;
  margin-top: 0px;
  padding-left: 0;
  padding-right: 0;
}

.navItem {
  text-align: center;
  list-style: none;
  height: 100%;
  position: relative;
  line-height: 4vh;
  flex-grow: 1;
  margin: 0px;
  padding: 0px;
}

  <div id="nav">
    <div id="logoCont">
      <img src="images/logo.png" id="logo">
    </div>
    <ul id="navBar">
      <div id="home" class="navItem">Home</div>
      <div id="events" class="navItem">Events</div>
      <div id="price" class="navItem">Pricing</div>
    </ul>
  </div>

CSS 全屏大小的技巧 div 将我的列表项推到右边

CSS trick for full screen sized div pushing my list items to the right

html

css

margin

spacing

flexbox