如何在沒有水平滾動條的情況下對齊此頁面連接？

嗨，我正在使用 CSS flexbox 創建簡單的網站，但是由于某些原因，我的布局在About.vue這個水平條上只有這個組件在mainLayout.vue，我無法弄清楚這個問題出了什么問題。有人知道如何解決嗎？

主布局.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>

主布局.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)

索引.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>

關于.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>

uj5u.com熱心網友回復：

嘗試添加這個：

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

雖然overflow-x如果上述方法失敗，這應該是最后的手段

標籤：javascript Vue.js

上一篇：當我快速輸入時，它會呈現錯誤的div

下一篇：Vuesjs：為什么復選框不過濾要顯示的值？