全屏大小div的CSS技巧将我的列表项推到右侧[重复]

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>

全屏大小div的CSS技巧将我的列表项推到右侧[重复]

问题描述投票：0回答：1

1个回答

最新问题

全屏大小div的CSS技巧将我的列表项推到右侧[重复]

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1