如何在没有水平滚动条的情况下对齐此页面内容？

Question

您好，我正在使用 CSS flexbox 创建简单的网站，但是由于某些原因，我在 About.vue 中的布局被这个水平条拉伸了，只有这个组件在 mainLayout.vue 中，我无法弄清楚造成这个问题的原因。有人知道如何解决吗？

MainLayout.vue

<template>
  <div class="wrapper--main">
    <Navbar />
    <Hero />
    <main>
      <slot />
    </main>
    <Footer />
  </div>
</template>
<script lang="ts">
import Hero from "../components/Hero.vue";
import Footer from "../components/Footer.vue";
import Navbar from "../components/Navbar.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { Navbar, Footer, Hero },
});
</script>
<style lang="sass">
@import "../styles/mainLayout.sass"
@import "../styles/variables.sass"
@import "../styles/utilitys.sass"
</style>

MainLayout.sass

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap')
*,
*::before,
*::after
    box-sizing: border-box
    margin: 0px
    padding: 0px

img,
picture,
svg
    max-width: 100%
    display: block
    object-fit: cover

img
    object-fit: cover
@media (min-width: 768px)
    html
        font-size: 130%

body
    font-family: 'Lato', sans-serif
    font-weight: 400
    line-height: 1.65
    max-width: 2000px
    background-color: hsl(var(--white))
    color: hsl(var(--text))

.wrapper--main
    display: grid
    grid-template-rows: auto 1fr auto
    min-height: 100vh

main
    display: grid
    gap: var(--size-fluid-6)
    margin-bottom: var(--size-fluid-5)
    margin-top: var(--size-fluid-5)

Index.vue

<template>
  <MainLayout><About /> </MainLayout>
</template>
<script lang="ts">
import MainLayout from "../layouts/MainLayout.vue";
import About from "../components/About.vue";
import { defineComponent } from "vue";
export default defineComponent({
  components: { MainLayout, About },
});
</script>
<style lang="sass">
</style>

About.vue

<template>
  <div class="about-container">
    <div class="wrapper gap">
      <div class="title-container--about gap--sm">
        <div class="title-wrapper">
          <h2 class="h2">lorem ipsum</h2>
          <p class="title-container--sm">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor
            iusto impedit molestiae quo, labore perspiciatis quia, deserunt quis
            nobis asperiores, delectus ut! Quaerat ut molestiae sunt ex
            molestias fuga quis. orem ipsum dolor sit amet consectetur,
            adipisicing elit. Dolor iusto impedit molestiae quo, labore
            perspiciatis quia, deserunt quis nobis asperiores, delectus ut!
            Quaerat ut molestiae sunt ex molestias fuga quis.
          </p>
        </div>
        <div class="arrow--map">
          <img class="icon--lg" src="../icons/arrow-map.svg" alt="" />
        </div>
        <div class="container-about-btn-map">
          <img class="icon--lg about-map" src="../icons/map.svg" alt="" />
          <button class="btn btn--primary about-btn">lorem ipsum</button>
        </div>
      </div>
      <img class="img-about only-desktop" src="../img/about.jpg" alt="" />
    </div>
  </div>
</template>
<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({});
</script>
<style lang="sass">
.title-container--sm
  width: var(--size-fluid-10)
  flex-grow: 0
.about-map
  margin-right: auto
.about-btn
  margin-right: auto
.container-about--btn-map
  display: flex
  flex-direction: column
  justify-content: center
  width: 200px
.gap--sm
  gap: var(--size-fluid-4)
.title-container--about
  display: flex
  flex-direction: column
.arrow--map
  display: flex
  justify-content: center
.gap
  gap: var(--size-fluid-8)
.about-container
  margin-left: var(--size-fluid-7)
  margin-right: var(--size-fluid-7)
@media (max-width: 1440px)
  .only-desktop
    display: none
</style>

Answer 1

尝试添加这个：

html, body
    ...
    max-width: 2000px
    width: 100vw
    overflow-x: hidden

尽管如果上述方法失败，overflow-x 应该是 last-resort。

其工作原理的解释

嗯，你为body元素设置的max-width 属性只是说body的宽度不能超过某个值。您的 html 元素也有自己的宽度，默认情况下就是视口（屏幕）宽度。因此，如果您的正文内容在 y 轴上伸展，您的正文元素将扩展到您设置的最大值以容纳该内容，这意味着它将溢出 html 元素的宽度。

指定 width: 100vw 意味着正文将与 html 元素具有相同的宽度，并且不应超过该宽度。

max-width 属性只有在屏幕尺寸非常大时才会发挥作用——例如在台式机上——并且您想限制页面内容的宽度。这不是通常会做的事情，因为 all 页面内容将被粘在屏幕的一侧。我确定这不是您想要的效果，因为这也意味着 full-width 导航栏等元素不会横跨整个屏幕。

如何在没有水平滚动条的情况下对齐此页面内容？

how to align this page contnet without horizontal scroll bar?

javascript

vue.js