在一行中有兩個HTML表單圖示而不移動內容-有解無憂

電流輸出：

在一行中有兩個 HTML 表單圖示而不移動內容

預期輸出：

在一行中有兩個 HTML 表單圖示而不移動內容

這是在我不使用表單時實作的，這是當前代碼：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table>
  <tr>
    <td>
      <form>
        <button type="submit">
                <i class="fa-solid fa-minus"></i>
            </button>
      </form>
      &nbsp; {{row.2}} &nbsp;
      <form>
        <button type="submit">
                <i class="fa-solid fa-plus"></i>
            </button>
      </form>
    </td>
  </tr>
</table>

提前致謝！

uj5u.com熱心網友回復：

把你td變成一個彈性容器應該可以解決問題。在我的示例中，我將 a 更改td為 adiv并給它一個類contain，因為在td沒有表的其余部分的情況下，它在輸出中消失了。

如果您可以編輯 html，則向該 td 添加一個類并使用它在您的 css 中定位是最好的選擇，如果您單獨定位td它，您可能會影響表單的其他一些您不打算的區域

另外，您使用form標簽而不是僅僅div包裝圖示按鈕是否有原因？

.contain {
  display: flex;
  flex-direction: row;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="contain">
  <form>
    <button type="submit">
            <i class="fa-solid fa-minus"></i>
        </button>
  </form>
  &nbsp; {{row.2}} &nbsp;
  <form>
    <button type="submit">
            <i class="fa-solid fa-plus"></i>
        </button>
  </form>
</div>

uj5u.com熱心網友回復：

您可以通過添加 tr > td * 3 將 td 單元格拆分為三個子單元格：

<td>
    <tr>
        <td>
            <form>
                <button type="submit">
                    <i class="fa-solid fa-minus"></i>
                </button>
            </form>
        </td>
        <td>
            &nbsp; {{row.2}} &nbsp;
        </td>
        <td>
            <form>
                <button type="submit">
                    <i class="fa-solid fa-plus"></i>
                </button>
            </form>
        </td>
    </tr>
</td>

uj5u.com熱心網友回復：

使form元素行內元素display: inline;

form {
  display: inline;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<td>
  <form>
    <button type="submit">
      <i class="fa-solid fa-minus"></i>
    </button>
  </form>
  &nbsp; {{row.2}} &nbsp;
  <form>
    <button type="submit">
      <i class="fa-solid fa-plus"></i>
    </button>
  </form>
</td>

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

標籤：htmlcss

上一篇：在css中定位元素的更好方法？

下一篇：如果它們并排，如何增加表格的寬度以適應彈出視窗？