HTML 网格的元素之间有太多空间

Question

我使用 HTML 网格，表单元素之间的空间太大。这是我的表单 HTML 代码（有点长，但网格仅在 form-element 类中定义）：

    <form id="embeddings_weights_form" class="form-settings">

        <div class="form-element">

            <label for="id_slider">General Similarity (view invariant):</label>

            <input type="range" min="-1" max="1" step="0.1" id="id_slider" value="1">

            <input type="text" class="range-output" id="general_similarity_output" readonly="">

        </div>

        <div class="form-element">

            <label for="category_slider">category:</label>

            <input type="range" min="-1" max="1" step="0.1" id="category_slider" value="0">

            <input type="text" class="range-output" id="category_output" readonly="">

            <select id="categoryQuery" class="query-form-class">

                <option value="[object" object]="">[object Object]</option>

                <option value="[object" object]="">[object Object]</option>

            </select>

        </div>

        <div class="form-element">

            <label for="color_slider">color:</label>

            <input type="range" min="-1" max="1" step="0.1" id="color_slider" value="0">

            <input type="text" class="range-output" id="color_output" readonly="">

            <select id="colorQuery" class="query-form-class">

                <option value="[object" object]="">[object Object]</option>

                <option value="[object" object]="">[object Object]</option>

            </select>

        </div>

    </form>

我的表单元素 CSS：

.form-element{

    margin-bottom: 20px;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

}

我厌倦了给网格模板列不同的值，但它看起来总是很糟糕（将最后一个元素移动到下一行，输出更糟糕）

表格如下所示：

这就是我希望它看起来的样子：

Answer 1

因为在 grid-template-columns 声明中，您为每列指定了 1fr 宽度，这意味着所有四列都将具有相同的宽度。尝试将第三个设置为自动并调整输入的宽度：此外，还添加了 grid-gap 属性，为每列提供一点喘息空间。.form-element {&nbsp; margin-bottom: 20px;&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr auto 1fr;&nbsp; grid-gap: 20px;}.range-output {&nbsp; max-width: 50px;}我在这里创建了一个工作代码笔。