在 v-expansion-panel-header 中将文本左对齐

Question

我正在尝试对齐 v-expansion-panel-headers 中的文本，但我不知道该怎么做。我=尝试过设置“justify-self-start”课程，但它没有改变任何东西。它仍然看起来像这样：

这是我的 HTML 代码：

<v-expansion-panels class="hidden-xl-only" id="dimensions-caisse" background-color="transparent" style="maxWidth: 300px;">
                <v-expansion-panel id="margin-dimensions-ep">
                    <v-expansion-panel-header class="justify-self-start">
                        <v-icon>{{ icons.mdiResize }}</v-icon> Dimensions
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <v-row>
                            <v-col cols="12" sm="12">
                                <v-text-field type="number" label="Longueur (mm)" v-model="vmodel.longueur"></v-text-field><v-text-field type="number" label="Largeur(mm)" v-model="vmodel.largeur"></v-text-field><v-text-field type="number" label="Hauteur (mm)" v-model="vmodel.hauteur"></v-text-field>
                            </v-col>
                        </v-row>
                    </v-expansion-panel-content>
                </v-expansion-panel>
                <v-expansion-panel id="margin-dimensions-ep">
                    <v-expansion-panel-header class="justify-self-start">
                        <v-icon>{{ icons.mdiTagOutline }}</v-icon> Etiquette
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <v-radio-group v-model="vmodel.radioGroupLabel">
                            <v-radio label="Sur la longueur" value="labelLongueur"></v-radio>
                            <v-radio label="Sur la largeur" value="labelLargeur"></v-radio>
                            <v-radio label="Pas d'étiquette" value="noLabel"></v-radio>
                        </v-radio-group>
                    </v-expansion-panel-content>
                </v-expansion-panel>
                <v-expansion-panel id="margin-dimensions-ep">
                    <v-expansion-panel-header class="justify-self-start">
                        <v-icon>{{ icons.mdiWeight }}</v-icon> Poids de la caisse (kg)
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <v-row>
                            <v-col cols="12" sm="12">
                                <v-text-field type="number" label="Poids" v-model="vmodel.poids"></v-text-field>
                            </v-col>
                        </v-row>
                    </v-expansion-panel-content>
                    <v-btn id="validCaissesep"  color="lightblue" class="white--text justify-center" @click="setDimensionsBox" :height="50"><v-icon color="white">{{ icons.mdiCheck }}</v-icon> Valider</v-btn>
                    <v-snackbar v-model="vmodel.snackbar" :timeout="2000">Données enregistrées.</v-snackbar>
                </v-expansion-panel>
            </v-expansion-panels>

你知道我该如何解决这个问题吗？

Answer 1

我找到了对齐图标和文本的解决方案。它不是全部推到左边，但我对我现在所拥有的感到满意：

我为每个标题添加了一个 v-container、一个 v-layout 和一个 v-flex，如下所示：

<v-expansion-panels class="hidden-xl-only" id="dimensions-caisse" background-color="transparent" style="maxWidth: 300px;">
                <v-expansion-panel id="margin-dimensions-ep">
                    <v-expansion-panel-header class="justify-self-start">
                        <v-container>
                            <v-layout row>
                                <v-flex cols1><v-icon>{{icons.mdiResize}}</v-icon> </v-flex><v-flex cols11> Dimensions</v-flex>
                            </v-layout>
                        </v-container>
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <v-row>
                            <v-col cols="12" sm="12">
                                <v-text-field type="number" label="Longueur (mm)" v-model="vmodel.longueur"></v-text-field><v-text-field type="number" label="Largeur(mm)" v-model="vmodel.largeur"></v-text-field><v-text-field type="number" label="Hauteur (mm)" v-model="vmodel.hauteur"></v-text-field>
                            </v-col>
                        </v-row>
                    </v-expansion-panel-content>
                </v-expansion-panel>
                <v-expansion-panel id="margin-dimensions-ep">
                    <v-expansion-panel-header class="justify-self-start">
                        <v-container>
                            <v-layout row>
                                <v-flex cols1><v-icon>{{icons.mdiTagOutline}}</v-icon> </v-flex><v-flex cols11> Etiquette</v-flex>
                            </v-layout>
                        </v-container>
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <v-radio-group v-model="vmodel.radioGroupLabel">
                            <v-radio label="Sur la longueur" value="labelLongueur"></v-radio>
                            <v-radio label="Sur la largeur" value="labelLargeur"></v-radio>
                            <v-radio label="Pas d'étiquette" value="noLabel"></v-radio>
                        </v-radio-group>
                    </v-expansion-panel-content>
                </v-expansion-panel>
                <v-expansion-panel id="margin-dimensions-ep">
                    <v-expansion-panel-header class="justify-self-start">
                        <v-container>
                            <v-layout row>
                                <v-flex cols1><v-icon>{{icons.mdiWeight}}</v-icon> </v-flex><v-flex cols11> Poids de la caisse (kg)</v-flex>
                            </v-layout>
                        </v-container>
                    </v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <v-row>
                            <v-col cols="12" sm="12">
                                <v-text-field type="number" label="Poids" v-model="vmodel.poids"></v-text-field>
                            </v-col>
                        </v-row>
                    </v-expansion-panel-content>

Answer 2

v-expansion-header 应该只包含一个根元素，因此您可以将图标和文本包装在一个元素中，例如 div：

<v-expansion-panel-header>
  <div>
    <v-icon>{{ icons.mdiTagOutline }}</v-icon> Etiquette
  </div>
</v-expansion-panel-header>

demo