html - 在单行上水平对齐表格单元格中的元素

Question

在我的表中，我有一列包含两个按钮和一个输入元素。它是有序的；减号按钮，输入，加号按钮。然而，这些元素都是垂直对齐的。我似乎无法为我的特定情况找到解决方案。如何让它水平对齐。

html:

<td class="text-center">
  <button class="page-btn" type="submit" value="foil-{{ card.card_id }}" onclick="minus_inventory(this.value)" tabindex="-1">
    <img class="icon" src="{% static 'base/img/icons/minus.png' %}" alt="Filter Sets">
  </button>
  <input type="number" id="foil-{{ card.card_id }}" class="page-input-inventory" maxlength="3" autocomplete="off" value="{{ card.foil }}" tabindex="2">
  <button class="page-btn" type="submit" value="foil-{{ card.card_id }}" onclick="plus_inventory(this.value)" tabindex="-1">
    <img class="icon" src="{% static 'base/img/icons/plus.png' %}" alt="Filter Sets">
  </button>
</td>

CSS：

.page-btn {
  width: 1.5rem;
  margin: 0 .4rem;
  padding: 0;
  outline: none !important;
}
.page-btn .icon {
  filter: invert(99%) sepia(10%) saturate(424%) hue-rotate(204deg) brightness(114%) contrast(93%);
  width: 1.5rem;
  height: 1.5rem;
  margin: .125rem 0 .125rem 0;
  outline: none !important;
}
.table {
  color: #f6f6f6;
  font-size: .8rem;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  color: #f6f6f6;
  background-color: #161d31;
}
.page-input-inventory {
  vertical-align: middle;
  text-align: center;
  font-size: .9rem;
  width: 3rem;
  height: 1.5rem;
  margin: .1rem auto;
  padding: 0 8px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  outline: 0 none !important;
}

截屏：

标签： htmlcss

Answer 1

你试过这个吗？

xyz {
   display: inline;
}