如何强制按钮在 vue.js 中保持一行？答案

【问题标题】：How can I force buttons to stay in one line in vue.js?如何强制按钮在 vue.js 中保持一行？
【发布时间】：2019-12-08 22:05:40
【问题描述】：

我在一个表格中有三个按钮，当行中的其他数据太长时，它会扩展表格，但三个按钮彼此重叠。无论如何，我都想强制我的三个按钮保持在一条线上。

<td class="text-xs-right">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</td>

正常：

问题：

【问题讨论】：

使用 CSS 为列指定最小宽度。

标签： javascript html vue.js button vuetify.js

【解决方案1】：

向表包装器添加新类

<td class="text-xs-right buttons-cell">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</td>

然后为这个类添加带有min-width属性的css样式。例如：

.buttons-cell {
   min-width: 150px;
}

【讨论】：

【解决方案2】：

禁用空格换行：

.text-xs-right {
  white-space: nowrap;
  
  /* To help visualize the fact that the container is too small */
  width: 10px;
  border: 1px solid #ddd;
}

<div class="text-xs-right">
  <div>
    <v-btn class="teal" fab small dark @click.native="$emit('edit', props.item)">
      <v-icon>edit</v-icon>
    </v-btn>
    <v-btn class="cyan" fab small @click.native="$emit('remove', props.item)">
      <v-icon>delete</v-icon>
    </v-btn>
    <v-btn class="lime" fab small @click.native="$emit('email', props.item)">
      <v-icon>email</v-icon>
    </v-btn>
  </div>
</div>

在这种情况下，我设置了明确的宽度，这意味着项目溢出。

在您的表格中，列应拉伸以适应内容。

【讨论】：