右对齐表格页脚

Question

我有一个包含数据的表格，我希望第一个页脚项左对齐，其余的右对齐。

这是预期的结果：

table {
  width: 100%
}

<table class="price-list">
  <thead>
    <tr>
      <th>No</th>
      <th>Nome</th>
      <th>Quantidade</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>text1</td>
      <td>text2</td>
      <td>text3</td>
      <td>text4</td>
    </tr>
  </tbody>
  <tfoot class="footer">
    <tr align="left">
      <td id="cart_voucher" class=" cart_voucher">
        <form action="http://localhost:8080/index.php?controller=order-opc" method="post" id="voucher">
          <div class="form-group form-group-placeholder">
            <input type="text" class="discount_name form-control" id="discount_name" name="discount_name" placeholder="Kod rabatowy" value="">
            <i class="fa fa-angle-right discount_icon" aria-hidden="true"></i>
            <input type="hidden" name="submitDiscount">
          </div>
        </form>
      </td>
    </tr>
    <!-- end VOUCHER -->
    <!-- Total products -->
    <tr align="right">
      <td>Total products </td>
      <td id="total_product">500,00 zł</td>
    </tr>
    <tr align="right">
      <td Total shipping (tax incl.):>
      </td>
      <td id="total_shipping" class="price-opc">12,00 zł</td>
    </tr>
    <tr align="right">
      <td>Total (tax excl.):</td>
      <td id="total_price_without_tax" class="price-opc">418,50 zł</td>
    </tr>
    <!-- end Total tax excl. -->
    <!-- Total tax -->
    <tr align="right">
      <td>Total tax:</td>
      <td>93,50 zł</td>
    </tr>
    <!-- end Total tax -->
    <tr align="right">
      <td>Total:</td>
      <td>
        <span>512,00 zł</span>
      </td>
    </tr>
  </tfoot>
</table>

我将align="left" 用于第一个页脚元素，将align="right" 用于其余元素。我得到以下信息：

更新更多解释 在页脚中，我们有表单输入和其他数据，表单输入应在左侧，其余页脚元素应在右侧，如下图所示

我尝试对每个tr 使用flex-box，但没有任何效果。有人可以帮帮我吗？我只希望页脚中的第一个元素左对齐，其余元素右对齐。谢谢，任何帮助或建议都会有所帮助。忽略thead 和tbody，只考虑tfoot。

Answer 1

您可以应用接受right 或left velues 的float 属性

.container {
  width: 100%;
  height: 100px;
  background-color: red;
}

.left {
  float: left;
  background-color: yellow;
}

.right {
  float: right;
  background-color: yellow;
}

<div class="container">
  <div class="left">Left Child</div>
  <div class="right">Right Child</div>
</div>

这就是属性的工作方式