css - 如何在选择中设置语言与菜单图标向下的距离？

Question

我的代码是这样的:

    <v-select
      v-model="e1"
      :items="states"
      menu-props="auto"
      label="Select"
      hide-details
      prepend-icon="language"
      single-line
      class="custom"
    ></v-select>

演示和完整代码如下:https://codepen.io/trendingnews/pen/NWPjbvX

如果我选择印度尼西亚，印度尼西亚文字和图标下拉菜单之间的距离非常合适

但是如果我选择英文，英文和下拉菜单图标之间的距离太远了

如何让它动态化？

我试过用css设置，还是失败

Answer 1

给 .v-select__selection--comma width: 100% 和 text-align: right 并且所有语言将具有相同的距离从下拉图标，或使用 terxt-align: center 如果您希望文本位于图标之间

.v-select__selection--comma {
  width: 100%;
  text-align: right;
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      e1: 'Indonesia',
      states: [
        'Indonesia', 'English',
      ],
    }
  },
})
Vue.config.productionTip = false

.custom .v-input__slot::before,
.custom .v-input__slot::after {
  border: none!important
}

.v-select__selection--comma {
  margin: 7px 4px 7px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: right;
}

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.15/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.15/dist/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row align="center">
        <v-col cols="10">
          <v-subheader>Logo</v-subheader>
        </v-col>
        <v-col cols="2" align="right">
          <div style="width:139px;">
            <v-select v-model="e1" :items="states" menu-props="auto" label="Select" hide-details prepend-icon="language" single-line class="custom"></v-select>
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>