Question

用vuetify编码Vue项目时，我发现<v-list>标签中有无用的填充，详细来说，它是关于<v-list-tile>标签的。

图片：https://segmentfault.com/img/bVbtemC?w=890&h=1288

有一个父级列表项和一个子级列表项，左右都有一些填充空间。

我遵循官方方法来设置class="pa-0"，但是，当我将该类添加到周围的所有标签中时，该方法不起作用。

当然，直接设置CSS也不能正常工作，上图显示目标标签是带有class="v-list__tile"的标签，但是此类的CSS仍然无法工作。

  <v-navigation-drawer width="200px" stateless value="true"
    class="transparent">
    <v-list subheader dense expand>
      <v-list-group no-action>
        <template v-slot:activator>
          <v-list-tile class="pa-0">
            <v-icon left>home</v-icon>
            <v-list-tile-title>menu-name-m</v-list-tile-title>
          </v-list-tile>
        </template>

        <v-list-tile class="pa-0" @click="onMenuCliked">
          <v-list-tile-title>no child - menu-name</v-list-tile-title>
        </v-list-tile>

      </v-list-group>
    </v-list>
  </v-navigation-drawer>

这部分是我的代码，它在vue-cli中。

我知道删除no-action标记中的<v-list-group>可以用于子列表项，但这不是我想要的方式，并且不适用于父列表项。

我希望我可以控制上图中的绿色填充，或者将其删除。

Answer 1

v-list-item呈现以下html

<div role="listitem">
  <div class="v-list__tile theme--light">

  </div>
</div>

因此，设置class会将其附加到父div上，而不是v-list__tile上，后者实际上是带有填充的div。
有时，解决此问题的方法是改用content-class道具，但是该组件似乎不支持它，因此您必须通过CSS来定位它，例如

.v-list__tile {
  padding: 0  
}

如果您想要更多的特异性，您仍然可以使用class：

<v-list-tile class="my-tile">

.my-tile .v-list__tile {
  padding: 0  
}

如果它不起作用并且您正在使用范围样式，请see more

Answer 2

V-list仅添加左侧填充，因此您可以简单地删除它，而无需将所有填充都设置为0。

要仅删除左填充，您只需将“ pl-0”类添加到您的v-list-tile中即可。

First row: {'id': '1', 'text': 'en'}
Last row: {'id': '4', 'text': 'en'}
First row: {'id': '5', 'text': 'en'}
Last row: {'id': '7', 'text': 'es'}
First row: {'id': '8', 'text': 'en'}
Last row: {'id': '10', 'text': 'en'}

如何在vuetify中删除列表项的填充

3 个答案: