【问题标题】:Effect of styles on component contents样式对组件内容的影响
【发布时间】:2023-04-14 23:41:02
【问题描述】:

这是一个基本的 CSS 问题,但我需要确认一些事情。假设我有以下内容:

 <v-app id="inspire">

<v-container justify-center style="max-width: 1200px">
          <v-layout row justify-space-around>

    <v-flex justify-center >
      <v-expansion-panel style="max-width: 1200px">
        <v-expansion-panel-content v-for="(item,i) in items" :key="i">
          <div slot="header">{{item.header}}</div>
          <v-card>
            <v-card-text>{{item.text}}</v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-flex>
  </v-layout>
</v-container>

关于:

<v-container justify-center style="max-width: 1200px">

我假设属性(justify-center 和 style="max-width: 1200px")适用于 v-container 的上下文,但不适用于 v-container 本身。这是正确的吗?

【问题讨论】:

    标签: css vue.js vuetify.js


    【解决方案1】:

    justify-center 它应用于 v-container 内的内容,而 ma​​x-width 应用于 v-container 本身

    【讨论】:

    • 谢谢。我对 css frameworkd 或 css 了解不多。你怎么知道的?
    • 当您使用 Vuetify 类时,您缺少 CSS 属性,在这种情况下为“justify-content=center;”它定义了浏览器如何沿 flex 容器的主轴和网格容器的内联轴在内容项之间和周围分配空间。你可以阅读更多关于here的信息另一方面,“max-width”设置元素的最大宽度。你可以阅读更多here希望这对你有帮助!
    • 谢谢,非常感谢!