html - 如何将列表项与 vuetify (1.5) 对齐

Question

我们的应用程序使用 vuetify 进行样式设计，这在很大程度上非常好，我遇到了一些我不应该花这么多时间弄清楚的事情。基本上问题是在使用范围 item 时。用于自定义 v-select 中显示的元素的插槽如果所有元素的大小都相同，则效果很好(就像文档中的情况一样，当元素大小不同时，问题就开始了。 这是我的代码:

<v-flex sm5>
  <v-select :items="evaluatedQuestions" @input="onQuestionSelected" :label="Select Questions..." item-text="display"
    item-value="question_id" clearable hide-selected single-line
    :menu-props="{'max-width': 716.4, 'allow-overflow': true}" ref="test">
    <template v-slot:item="{ item }">
      <v-list-tile class="pa-0 question-dd">
        <v-list-tile-content class="pa-0">
          <v-list-tile-title> 
            #{{ item.question_id }}
          </v-list-tile-title>
          <v-list-tile-sub-title>
            {{ item.total }}
          </v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile>
        <!-- <v-flex sm10> -->
        {{item.question_title}}
        <!-- </v-flex> -->
      </v-list-tile>
      <!-- <v-list-tile>
        <v-divider class="px-2" vertical></v-divider>
      </v-list-tile>
      <v-list-tile-avatar>
        &lt;!&ndash; {{item.question_title}}&ndash;&gt;
      </v-list-tile-avatar> -->
    </template>
    <v-divider></v-divider>
  </v-select>
</v-flex>

下面是截图:

我尝试过的事情:

1. 将所有内容放在一个 .布局并创建 v-flex，它采用一定数量的网格。

2. 在我无法访问的地方注入(inject)类(遗憾的是 v-list 没有公开，如您所见

3. 添加一个具有最大宽度的类“question-dd”来设置第一个列表项的大小，不幸的是周围的元素决定了大小。
   底线是 v-list 元素根据它们的大小调整大小，并且当它们大小不同时不能很好地对齐，我怎样才能让它看起来与第一个列表项中的两个数据片段对齐无论大小如何都与第二个列表项对齐？

Answer 1

这可能对您的情况有所帮助。将列表图 block 包裹在网格显示中可以修复对齐问题。

codepen

<div id="app">
  <v-app id="inspire">
      <v-select
        v-model="value"
        :items="items"
        label="Select Item"
        clearable hide-selected single-line
        ref="test">
    <template v-slot:item="{ item }">
     <div class="test"> 
      <v-list-tile>
        <v-list-tile-content>
          <v-list-tile-title> 
            #{{ item.question_id }}
          </v-list-tile-title>
          <v-list-tile-sub-title>
            {{ item.total }}
          </v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
      <v-list-tile>
        {{item.question_title}}
      </v-list-tile>
      </div>
    </template>
    <v-divider></v-divider>
      </v-select>
  </v-app>
</div>
....
<style scoped>
.test {
 display: grid;
 grid-template-columns: 200px 1fr;
 text-align: left;
}
</style>