使用 CSS 调整 HTML 表格

Question

我有一张看起来像这样的桌子使用此代码：嵌入设置Id：类别1：无类别2：无重置嵌入和 CSS 类表单元素：.form-element { 边距底部：20px; 显示：网格；网格模板列：1fr 1fr auto 1fr；网格间隙：20px；}所以看起来不错。我想添加 1 个复选框并使表单如下所示：问题是当我尝试添加带有复选框的新列时：使用此代码（只需添加一个复选框输入）：.form-element {  margin-bottom: 20px;  display: grid;  grid-template-columns: 1fr 1fr auto 1fr 1fr;  grid-gap: 20px;}<div id="form-query-settings">    <label for="embeddings_weights_form" class="form-label">        <h3>Embeddings Settings</h3></label>    <form id="embeddings_weights_form" class="form-settings">        <div class="form-element">            <label for="id_slider">Id:</label>            <input type="range" min="-1" max="1" step="0.1" id="id_slider" value="0">            <input type="text" class="range-output" id="id" readonly="">        </div>        <div class="form-element">            <label for="category1_slider">category1:</label>            <input type="range" min="-1" max="1" step="0.1" id="category1_slider" value="0">            <input type="text" class="range-output" id="category1_output" readonly="">            <select id="category1Query" class="query-form-class">                <option value="None">None</option>            </select>            <div class="form-element">                <label for="filterbycategory1">Filter by: </label>                <input type="checkbox" id="filterbycategory1" class="query-form-class">            </div>        </div>        <div class="form-element">            <label for="category2_slider">category2:</label>            <input type="range" min="-1" max="1" step="0.1" id="category2_slider" value="0">            <input type="text" class="range-output" id="category2_output" readonly="">            <select id="category2Query" class="query-form-class">                <option value="None">None</option>            </select>        </div>        <button id="reset-button" class="form-element">Reset embeddings</button>    </form></div>我该如何解决？我尝试在 css 文件中添加 auto 而不是 1fr，但它又产生了另一个不好的视图。

Answer 1

添加align-items: center;到.form-control班级。