我使用 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;}我厭倦了給網格模板列不同的值，但它看起來總是很糟糕（將最后一個元素移動到下一行，輸出更糟糕）表格如下所示：這就是我希望它看起來的樣子：
1 回答
天涯盡頭無女友
TA貢獻1831條經驗 獲得超9個贊
因為在 grid-template-columns 聲明中，您為每列指定了 1fr 寬度，這意味著所有四列都將具有相同的寬度。
嘗試將第三個設置為自動并調整輸入的寬度：
此外，還添加了 grid-gap 屬性，為每列提供一點喘息空間。
.form-element {
margin-bottom: 20px;
display: grid;
grid-template-columns: 1fr 1fr auto 1fr;
grid-gap: 20px;
}
.range-output {
max-width: 50px;
}
我在這里創(chuàng)建了一個工作代碼筆。
- 1 回答
- 0 關注
- 94 瀏覽
添加回答
舉報
0/150
提交
取消