为什么我的网页内容右侧在较小的浏览器/移动浏览器视图中消失？

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

我正在 Coursera.org 上学习 Meta 的前端 Web 开发课程，并且即将完成“深入了解 HTML 和 CSS”课程的客户项目。但是，当我缩小浏览器或通过 Inspect 查看移动浏览器时，内容的右侧会被稍微切断，并且不会像左侧那样显示空白。

检查截图： Inspect screenshot

针对我的桌面的较小浏览器屏幕截图： Smaller browser screenshot against my desktop

这是我当前代码的片段

body {
  background-color: rgb(250, 250, 250);
  font-family: 'markazi text', serif;
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: 5%;
  margin-right: 5%;
  scroll-margin-right: 5%;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

header>img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.image-container {
  text-align: center;
}

.image-container img {
  display: inline-block;
}

nav {
  background-color: #71d1a1;
  text-align: center;
  padding: 2px;
  border-radius: 10px;
  width: 100%;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 15px;
  font-size: 25px;
}

nav a:hover {
  background-color: #5bb98b;
  color: #ffffff;
  border-radius: 10px;
  text-decoration: underline;
}

nav ul {
  list-style: none;
  text-align: center;
}

nav li {
  display: inline-block;
}

nav li:not(:last-child)::after {
  content: "|";
  margin: 0 10px;
}

section {
  display: flex;
}

article {
  flex: 1;
  border-radius: 10px;
}

.spaced-section article {
  background-color: #fbe9d3;
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.spaced-section article img {
  width: 100%;
  height: auto;
  display: block;
}

.spaced-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 2rem;
}

p {
  font-size: 22px;
}

a.promotion-banner {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

a.promotion-banner article {
  transition: transform 0.6s ease-in-out;
  cursor: pointer;
}

a.promotion-banner:hover {
  text-decoration: none;
}

a.promotion-banner:hover h1 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

a.promotion-banner:hover button {
  text-decoration: underline;
}

a.promotion-banner:hover article {
  transform: scale(1.05);
}

button {
  color: #ffffff;
  background-color: #71d1a1;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
}

button:hover {
  background-color: #5bb98b;
}

.button {
  color: #ffffff;
  background-color: #71d1a1;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: #5bb98b;
  text-decoration: underline;
}

footer {
  display: flex;
}

footer div {
  flex: 1;
}

@media (max-width: 768px) {
  section {
    flex-direction: column;
    align-items: center;
  }
  .spaced-section {
    flex-direction: column;
    gap: 10px;
  }
  article {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  footer {
    flex-direction: column;
    align-items: center;
  }
  nav ul {
    display: block;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  nav li {
    display: inline-block;
    margin: 10px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Lucky Shrub</title>
  <meta name="description" content="A brief description">
  <meta name="author" content="Little Lemon Restuarant">

  <link rel="stylesheet" href="client project.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <img src="Lucky-Shrub-logos/Asset%[email protected]" alt="Lucky Shrub logo" width="75" height="auto">
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="menu.html">Designs</a></li>
      <li><a href="book.html">Shop</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
  <main>
    <section class="spaced-section">
      <a href="shop.html" class="promotion-banner">
        <article>
          <h1>30% discount on outdoor plants this weekend</h1>
          <p>
            Find a new addition from our small plant nursery to transform your garden space into an oasis you can be proud of.
          </p>
          <button>Shop now</button>
        </article>
      </a>
    </section>
    <section class="spaced-section">
      <article class="centered-image">
        <div class="image container">
          <img src="garden design.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
        </div>
        <h2>Boutique garden design</h2>
        <p>
          We provide garden design, creation, maintenance, and landscaping for budgets large and small.
        </p>
        <p>
          <a href="design.html" class="button">Explore ideas</a>
        </p>
      </article>
      <article>
        <img src="indoor and outdoor plants.jpg" alt="Indoor and outdoor plants" width="250" height="166.70000000000002">
        <h2>Buy plants</h2>
        <p>
          Take a look at our entire range of indoor and outdoor plants to see what could improve your green space.
        </p>
        <p>
          <a href="design.html" class="button">Browse range</a>
        </p>
      </article>
      <article>
        <img src="Contact us.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
        <h2>About us</h2>
        <p>
          <p>Lucky Shrub is run by husband and wife team Jason and Maria, who share a long-time love for plants.</p>
          </style>
        </p>
        <p>
          <a href="design.html" class="button">Contact details</a>
        </p>
      </article>
    </section>
  </main>
  <footer>
    <div>
      <img src="Lucky-Shrub-logos/Asset%[email protected]" alt="Lucky Shrub logo" width="25" height="auto">
    </div>
    <div>
      <p>Copyright © 2024 Lucky Shrub</p>
    </div>
  </footer>
</body>

</html>

我是编码新手，所以我知道答案将是非常明显的！我希望你能帮忙。谢谢你。

这是我当前的代码，在片段中重新格式化之前

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Lucky Shrub</title>
    <meta name="description" content="A brief description">
    <meta name="author" content="Little Lemon Restuarant">

        <link rel="stylesheet" href="client project.css">

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap" rel="stylesheet">
    </head>
    <body>
    <header>
        <img src="Lucky-Shrub-logos/Asset%[email protected]" alt="Lucky Shrub logo" width="75" height="auto">
        </header>

        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="menu.html">Designs</a></li>
                <li><a href="book.html">Shop</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
        <main>
            <section class="spaced-section">
                <a href="shop.html" class="promotion-banner">
                <article>
                    <h1>30% discount on outdoor plants this weekend</h1>
                    <p>
                        Find a new addition from our small plant nursery to transform your garden space into an oasis you can be proud of. 
                    </p>
                    <button>Shop now</button>
                </article>
            </a>
            </section>
            <section class="spaced-section">
                <article class="centered-image">
                    <div class="image container">
                    <img src="garden design.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
                </div>
                <h2>Boutique garden design</h2>
                    <p>
                        We provide garden design, creation, maintenance, and landscaping for budgets large and small.
                    </p>
                    <p>
                        <a href="design.html" class="button">Explore ideas</a>
                    </p>
                </article>
                <article>
                    <img src="indoor and outdoor plants.jpg" alt="Indoor and outdoor plants" width="250" height="166.70000000000002">
                    <h2>Buy plants</h2>
                    <p>
                        Take a look at our entire range of indoor and outdoor plants to see what could improve your green space.
                    </p>
                    <p>
                        <a href="design.html" class="button">Browse range</a>
                    </p>
                </article>
                <article>
                    <img src="Contact us.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
                    <h2>About us</h2>
                    <p>
                            <p>Lucky Shrub is run by husband and wife team Jason and Maria, who share a long-time love for plants.</p>
                        </style>
                    </p>
                    <p>
                        <a href="design.html" class="button">Contact details</a>
                    </p>
                </article>
            </section>
        </main>
        <footer>
            <div>
                <img src="Lucky-Shrub-logos/Asset%[email protected]" alt="Lucky Shrub logo" width="25" height="auto">
                </div>
                <div>
                    <p>Copyright © 2024 Lucky Shrub</p>
                </div>
        </footer>
        </body>
    </html>

    body {
    background-color: rgb(250, 250, 250);
    font-family: 'markazi text', serif;
    margin-top: 3rem;
    margin-bottom: 3rem;
    margin-left: 5%;
    margin-right: 5%;
    scroll-margin-right: 5%;
    }

    h1 {
    font-size: 3rem;
    }

    h2 {
    font-size: 2rem;
    }

    header > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    }

    .image-container {
    text-align: center;
    }

    .image-container img {
    display: inline-block;
    }

    nav {
    background-color: #71d1a1;
    text-align: center;
    padding: 2px;
    border-radius: 10px;
    width: 100%;
    }

    nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 25px;
    }

    nav a:hover {
    background-color: #5bb98b;
    color: #ffffff;
    border-radius: 10px;
    text-decoration: underline;
    }

    nav ul {
    list-style: none;
    text-align: center;
    }

    nav li {
    display: inline-block;
    }

    nav li:not(:last-child)::after {
    content: "|";
    margin: 0 10px;
    }

    section {
    display: flex;
    }

    article {
    flex: 1;
    border-radius: 10px;
    }

    .spaced-section article {
    background-color: #fbe9d3;
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    }

    .spaced-section article img {
    width: 100%;
    height: auto;
    display: block;
    }

    .spaced-section {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 2rem;
    }

    p {
    font-size: 22px;
    }

    a.promotion-banner {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 100%;
    }

    a.promotion-banner article {
    transition: transform 0.6s ease-in-out;
    cursor: pointer;
    }

    a.promotion-banner:hover {
    text-decoration: none;
    }

    a.promotion-banner:hover h1 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    }

    a.promotion-banner:hover button {
    text-decoration: underline;
    }

    a.promotion-banner:hover article {
    transform: scale(1.05);
    }

    button {
    color: #ffffff;
    background-color: #71d1a1;
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
    transition: background-color 0.3s, transform 0.3s;
    cursor: pointer;
    }

    button:hover {
    background-color: #5bb98b;
    }

    .button {
    color: #ffffff;
    background-color: #71d1a1;
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    display: inline-block;
    transition: background-color 0.3s, transform 0.3s;
    }

    .button:hover {
    background-color: #5bb98b;
    text-decoration: underline;
    }

    footer {
    display: flex;
    }

    footer div {
    flex: 1;
    }

    @media (max-width: 768px) {
    section {
        flex-direction: column;
        align-items: center;
    }

    .spaced-section {
        flex-direction: column;
        gap: 10px;
    }

    article {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    footer {
        flex-direction: column;
        align-items: center;
    }

    nav ul {
        display: block;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    nav li {
        display: inline-block;
        margin: 10px;
    }
    }
html css web-frontend
1个回答
0
投票

解决此问题的主要步骤是将 

box-sizing: border-box;
添加到几乎所有内容，即 

* {
  box-sizing: border-box;
}

这会将填充和边框计算为给定 widths 和 

height
的 
 的
部分，否则会 添加，这又会导致您在示例中看到的结果。 （例如 100% 宽度加上左/右填充将创建比 100% 更宽的内容）

* {
  box-sizing: border-box;
}
body {
  background-color: rgb(250, 250, 250);
  font-family: 'markazi text', serif;
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: 5%;
  margin-right: 5%;
  scroll-margin-right: 5%;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

header>img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.image-container {
  text-align: center;
}

.image-container img {
  display: inline-block;
}

nav {
  background-color: #71d1a1;
  text-align: center;
  padding: 2px;
  border-radius: 10px;
  width: 100%;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 15px;
  font-size: 25px;
}

nav a:hover {
  background-color: #5bb98b;
  color: #ffffff;
  border-radius: 10px;
  text-decoration: underline;
}

nav ul {
  list-style: none;
  text-align: center;
}

nav li {
  display: inline-block;
}

nav li:not(:last-child)::after {
  content: "|";
  margin: 0 10px;
}

section {
  display: flex;
}

article {
  flex: 1;
  border-radius: 10px;
}

.spaced-section article {
  background-color: #fbe9d3;
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.spaced-section article img {
  width: 100%;
  height: auto;
  display: block;
}

.spaced-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 2rem;
}

p {
  font-size: 22px;
}

a.promotion-banner {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

a.promotion-banner article {
  transition: transform 0.6s ease-in-out;
  cursor: pointer;
}

a.promotion-banner:hover {
  text-decoration: none;
}

a.promotion-banner:hover h1 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

a.promotion-banner:hover button {
  text-decoration: underline;
}

a.promotion-banner:hover article {
  transform: scale(1.05);
}

button {
  color: #ffffff;
  background-color: #71d1a1;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
}

button:hover {
  background-color: #5bb98b;
}

.button {
  color: #ffffff;
  background-color: #71d1a1;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 10px;
  display: inline-block;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: #5bb98b;
  text-decoration: underline;
}

footer {
  display: flex;
}

footer div {
  flex: 1;
}

@media (max-width: 768px) {
  section {
    flex-direction: column;
    align-items: center;
  }
  .spaced-section {
    flex-direction: column;
    gap: 10px;
  }
  article {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  footer {
    flex-direction: column;
    align-items: center;
  }
  nav ul {
    display: block;
    padding: 0;
    margin: 0;
    text-align: center;
  }
  nav li {
    display: inline-block;
    margin: 10px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Lucky Shrub</title>
  <meta name="description" content="A brief description">
  <meta name="author" content="Little Lemon Restuarant">

  <link rel="stylesheet" href="client project.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Markazi+Text&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <img src="Lucky-Shrub-logos/Asset%[email protected]" alt="Lucky Shrub logo" width="75" height="auto">
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="menu.html">Designs</a></li>
      <li><a href="book.html">Shop</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
  <main>
    <section class="spaced-section">
      <a href="shop.html" class="promotion-banner">
        <article>
          <h1>30% discount on outdoor plants this weekend</h1>
          <p>
            Find a new addition from our small plant nursery to transform your garden space into an oasis you can be proud of.
          </p>
          <button>Shop now</button>
        </article>
      </a>
    </section>
    <section class="spaced-section">
      <article class="centered-image">
        <div class="image container">
          <img src="garden design.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
        </div>
        <h2>Boutique garden design</h2>
        <p>
          We provide garden design, creation, maintenance, and landscaping for budgets large and small.
        </p>
        <p>
          <a href="design.html" class="button">Explore ideas</a>
        </p>
      </article>
      <article>
        <img src="indoor and outdoor plants.jpg" alt="Indoor and outdoor plants" width="250" height="166.70000000000002">
        <h2>Buy plants</h2>
        <p>
          Take a look at our entire range of indoor and outdoor plants to see what could improve your green space.
        </p>
        <p>
          <a href="design.html" class="button">Browse range</a>
        </p>
      </article>
      <article>
        <img src="Contact us.jpg" alt="Boutique garden design" width="250" height="166.70000000000002">
        <h2>About us</h2>
        <p>
          <p>Lucky Shrub is run by husband and wife team Jason and Maria, who share a long-time love for plants.</p>
          </style>
        </p>
        <p>
          <a href="design.html" class="button">Contact details</a>
        </p>
      </article>
    </section>
  </main>
  <footer>
    <div>
      <img src="Lucky-Shrub-logos/Asset%[email protected]" alt="Lucky Shrub logo" width="25" height="auto">
    </div>
    <div>
      <p>Copyright © 2024 Lucky Shrub</p>
    </div>
  </footer>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.