html - 在 v-expansion-panel-header 中将文本左对齐
问题描述
我正在尝试对齐 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>
你知道我怎么能解决这个问题吗?
解决方案
我找到了对齐图标和文本的解决方案。它并没有全部被推到左边,但我对我现在所拥有的感到满意:
我为每个标题添加了一个 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>
推荐阅读
- python - 如何在linux中的python 3.6中创建multiprocessing.Array后启动forkserver
- database - Oracle 12C 数据库默认监听器
- c++ - 在默认浏览器中加载 URL 并置于前面
- python-2.7 - wxpython:带复选框的表格
- c# - 为什么添加 Microsoft.AspNetCore.OData.Versioning 后我的 HTTP Post 不再传递正文内容
- javascript - X值为真后如何显示myArray?
- amazon-web-services - 降低 gmail 中域的垃圾邮件率
- python - 通过环境设置的测试模块变量
- excel - 尝试通过 Excel VBA 宏将 Excel 工作表另存为 CSV 时出错
- android - Firebase 设备实验室 - 我如何运行跨应用测试