为什么我的 CSS 布局在我调整屏幕大小时不断中断？

Question

每次我练习CSS布局，每次调整浏览器window，网站右侧的屏幕总是被截断，所以会有一个空白space 白色背景。有人可以帮助我确定问题，以便我可以永久避免再次发生这种情况吗？这是 HTML 代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

header {
  background: url(http://www.moirmedia.co.uk/wp-content/uploads/2016/05/Backgroundlow.jpg) no-repeat center center/cover;
  background-position: inherit;
  height: 165vh;
}

nav {
  background: black;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  padding-right: 2rem;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  position: relative;
  right: 5rem;
  padding: 0 4rem;
  font-size: 1.2rem;
}

nav ul li a {
  text-decoration: none;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.hero-text h1 {
  font-size: 4rem;
  padding: 1rem;
}

.hero-text p {
  font-size: 1.3rem;
  text-align: justify;
}

<header>
  <nav>
    <h2 class="logo">Logo</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="hero-text">
    <h1>Banner Text Heading</h1>
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum</p>
  </div>
</header>

Answer 1

用这个

替换你的css代码

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  position: relative;
  right: 5rem;
  padding: 0 4rem;
  font-size: 1.2rem;
}

改了一个

nav ul {
  display: flex;
  flex-wrap: wrap;
}

nav ul li {
  list-style: none;
  position: relative;
  padding: 0 2rem;
  font-size: 1.2rem;
}

Answer 2

您在 nav ul li 上设置的 padding 和 right 样式将内容推送到父容器之外。使用 media queries will fix your issue and give you greater control of your layout at different screen resolutions. MDN has an article Beginner's guide to media queries 添加一些响应式断点，提供有关媒体查询的更多信息。

下面是在您的代码中使用媒体查询的示例。请注意每个断点如何指定一个 padding-right 值，您可能需要调整该值以使您的内容符合预期。微调可以是一个过程。我使用 Typical Device Breakpoints 中的断点作为一个很好的起点。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

header {
  background: url(http://www.moirmedia.co.uk/wp-content/uploads/2016/05/Backgroundlow.jpg) no-repeat center center/cover;
  background-position: inherit;
  height: 165vh;
  width: 100%;
}

nav {
  background: black;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

nav h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  padding-right: 2rem;
}

nav ul {
  display: flex;
}

nav ul li {
  list-style: none;
  position: relative;
  padding: 0 0.5rem;
  font-size: 1.2rem;
}

nav ul li a {
  text-decoration: none;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.hero-text h1 {
  font-size: 4rem;
  padding: 1rem;
}

.hero-text p {
  font-size: 1.3rem;
  text-align: justify;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  nav ul li {
    padding-right: 0.5rem;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  nav ul li {
    padding-right: 0.8rem;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  nav ul li {
    padding-right: 1.8rem;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  nav ul li {
    padding-right: 3rem;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  nav ul li {
    right: 5rem;
    padding-right: 4rem;
  }
}

<header>
  <nav>
    <h2 class="logo">Logo</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="hero-text">
    <h1>Banner Text Heading</h1>
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum</p>
  </div>
</header>

这是一种替代方法，它使用 flexbox 属性（例如 justify-content 并将填充放在 a 元素上以增加触摸目标大小，从而提高您网站的可访问性。我建议使用此选项，因为它需要管理的代码更少，是一种更现代的方法，并且可以实现类似的结果。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

header {
  background: url(http://www.moirmedia.co.uk/wp-content/uploads/2016/05/Backgroundlow.jpg) no-repeat center center/cover;
  background-position: inherit;
  height: 165vh;
  width: 100%;
}

nav {
  background: black;
  padding: 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

nav h2 {
  text-transform: uppercase;
  font-size: 2.5rem;
  padding-right: 2rem;
}

nav ul {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

nav ul li {
  list-style: none;
  position: relative;
  font-size: 1.2rem;
}

nav ul li a {
  text-decoration: none;
  padding: 1rem 0.5rem;
}

nav ul li a:hover {
  text-decoration: underline;
}

.hero-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.hero-text h1 {
  font-size: 4rem;
  padding: 1rem;
}

.hero-text p {
  font-size: 1.3rem;
  text-align: justify;
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
  nav ul {
    justify-content: space-evenly;
  }
  nav ul li a {
    padding: 1rem;
  }
}

<header>
  <nav>
    <h2 class="logo">Logo</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <div class="hero-text">
    <h1>Banner Text Heading</h1>
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum <br> Lorem ipsum</p>
  </div>
</header>

这两个选项仍然无法在移动设备等小屏幕上将所有 nav 项显示在一行中。我建议您考虑替代方案 navigation patterns such as a collapsible menu or even just wrap your content with flex-wrap: wrap; as .

为什么我的 CSS 布局在我调整屏幕大小时不断中断？

Why does my CSS layout keeps breaking when i resize my screen?

html

css

flexbox

responsive-design