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

Posted 2023-02-23

【中文标题】如何在选择中设置菜单图标向下的语言之间的距离？

【英文标题】：How do I set the distance between the language with the menu icon down in select?

【发布时间】：2020-04-14 01:42:28

【问题描述】：

我的代码是这样的：

    <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 设置它，但我仍然失败

【参考方案1】：

给.v-select__selection--commawidth: 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>

【讨论】：

它有效。但是在选择英文的时候，会使与语言图标的英文书写距离太远。也可以让语言图标也右移吗？

您可以使用width: min-content，请参阅codepen

【参考方案2】：

将此 css 添加到您的 css 文件中，希望对您有所帮助。因为 display flex 属性 它不是 center 。通过您的代码笔对其进行了测试，希望它会起作用。如果不起作用，请告诉我。

.v-select__selections 
    align-items: center;
    display: initial;
    flex: 1 1;
    flex-wrap: wrap;
    text-align: center;
    line-height: 18px;
    max-width: 100%;
    min-width: 0;

【讨论】：

这里是codepen，你能检查一下吗，它在这里工作。并完全居中对齐。 codepen.io/salmanaabir/pen/BayRYGJ