如何在 Vue.js 的一行中显示所有按钮？答案

【问题标题】：How do I show all buttons in a single line in Vue.js?如何在 Vue.js 的一行中显示所有按钮？
【发布时间】：2018-12-17 12:50:05
【问题描述】：

我正在学习 Vue.js，但我有一个问题。

   <table class="table">
      <thead class="thead-light">
        <tr>
          <th>Name</th>
          <th>Surname</th>
          <th>Email</th>
          <th></th>
        </tr>
      </thead>

      <tbody v-for="people in humans">
        <tr>
          <td>{{ people.name }}</td>
          <td>{{ people.surname }}</td>
          <td>{{ people.email }}</td>

          <td>
            <button class="btn btn-sm">
            </button>
            <button class="btn btn-sm" >
            </button>
            <button class="btn btn-sm">
            </button>
          </td>

风格

<style>
  .table tr > td {
    border-top: none;
  }
  tr > td:last-child {
    padding: 7px;
    width: 80px;
  }
  tr > td:last-child .btn {
    width: 30px;
    height: 30px;
  }
</style>

我在 vue js 端创建了 3 个按钮，但最后一个按钮移到了底部。如何在一行中显示所有按钮？

【问题讨论】：

您的 HTML/CSS 与在下一行显示按钮无关，这是因为列没有适当的宽度。
我该如何解决这个问题？

标签： vue.js

【解决方案1】：

试试这个：

<tbody v-for="people in humans">
    <tr>
      <td>{{ people.name }}</td>
      <td>{{ people.surname }}</td>
      <td>{{ people.email }}</td>
   </tr>
   <tr>
      <td>
        <button class="btn btn-sm">
        </button>
        <button class="btn btn-sm" >
        </button>
        <button class="btn btn-sm">
        </button>
      </td>
   </tr>

此外，听起来您的宽度有问题。确保您的表格具有正确的宽度以在同一行上接受三个按钮。

【讨论】：

【解决方案2】：

       <td>
          <button class="btn btn-sm"></button>
       </td>
       <td>
          <button class="btn btn-sm"></button>
       </td>
       <td>
         <button class="btn btn-sm"></button>
       </td>

如果还是不行，请打开浏览器控制台并检查您的项目。也许有一些边距或填充将最后一个按钮推到下一行。

【讨论】：

谢谢，我已经更新了问题