CSSdisplayflex不會并排對齊div-有解無憂

這是我正在運行的 html 代碼

.table-header {
  display: flex;
  width: 100%;
}

<div class="table-header">

  <div>
    <h3>Balance Forwarded: <span style="text-decoration: underline;"><?php echo $total_Fwd; ?></span></h3>
    <h3>Total Unpaid Balance: <span style="text-decoration: underline;"><?php echo $total_bal; ?></span></h3>
    <h3>Total Interest Charged: <span style="text-decoration: underline;"><?php echo $total_Int; ?></span></h3>
  </div>

  <div>
    <form id="send" action="file.php" target="_blank" method="post">

      <input type="hidden" id="query" name=q uery value="<?php echo $sql; ?>">
      <input type="hidden" id="total_fwd" name=t otal_fwd value="<?php echo $total_Fwd; ?>">
      <input type="hidden" id="total_bal" name=t otal_bal value="<?php echo $total_bal; ?>">
      <input type="hidden" id="total_int" name=t otal_int value="<?php echo $total_Int; ?>">

      <button type="submit" class="btn btn-dark">Print</button>
    </form>
  </div>
</div>

但是，它沒有對齊兩個子 div，目前看起來像這樣： CSS display flex不會并排對齊div

我希望這兩個并排使用 flex，謝謝

uj5u.com熱心網友回復：

使用align-items: center;您也可以使用gap它們來分隔它們。

.table-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

<div class="table-header">

  <div>
    <h3>Balance Forwarded: <span style="text-decoration: underline;"><?php echo $total_Fwd; ?></span></h3>
    <h3>Total Unpaid Balance: <span style="text-decoration: underline;"><?php echo $total_bal; ?></span></h3>
    <h3>Total Interest Charged: <span style="text-decoration: underline;"><?php echo $total_Int; ?></span></h3>
  </div>

  <div>
    <form id="send" action="file.php" target="_blank" method="post">

      <input type="hidden" id="query" name=q uery value="<?php echo $sql; ?>">
      <input type="hidden" id="total_fwd" name=t otal_fwd value="<?php echo $total_Fwd; ?>">
      <input type="hidden" id="total_bal" name=t otal_bal value="<?php echo $total_bal; ?>">
      <input type="hidden" id="total_int" name=t otal_int value="<?php echo $total_Int; ?>">

      <button type="submit" class="btn btn-dark">Print</button>
    </form>
  </div>
</div>

uj5u.com熱心網友回復：

.table-header {
  display: flex;
  justify-content: 'space-between';
 }

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/429132.html

標籤：html css 弹性盒

上一篇：如何用css調整大影像的大小？

下一篇：將單個專案對齊到導航欄的右側