如何使用网格来格式化 CSS 中的表单布局？答案

【问题标题】：How can I use a grid to format the layout of a form in CSS?如何使用网格来格式化 CSS 中的表单布局？
【发布时间】：2022-01-20 00:44:45
【问题描述】：

我一直在四处寻找如何使用网格来格式化表单的布局。我似乎正在做其他编码人员正在做的事情以在 CSS 中使用网格，但它只是不起作用。我的目标是将“类型”选择器放在宠物名称的右侧，将重置按钮放在提交按钮的右侧。有人能指出我错过了什么吗？ my css code and what the form looks like

The HTML for the form

【问题讨论】：

请包含代码，不代码图片。最好是minimal reproducible example

标签： html css css-grid

【解决方案1】：

您为单个元素使用单独的 div，这就是元素一个接一个显示的原因。您可以为要彼此相邻显示的元素放置一个通用 div。

<div class="grid">
<div>
<legend>Add pet</legend>
</div>
<div>
<label for="Name">Pet Name</label>
<input type="text" id="name" name="pet_name">
<label for="Type"></label>
<select id="type" name="pet_type">
<option value="Cat">Cat<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
</select>
</div>
<div>
<button type="submit" id="new_pet_submit_button">Create New Pet</button>
<button type="reset">Reset</button>
</div>
</div>

【讨论】：

【解决方案2】：

我认为您的问题可能是因为 <div> 您在输入和选择标签上都有。默认情况下，div 是块元素，浏览器将通过在 div 前后放置换行符来在新行上启动 div。

一个快速解决方法是删除您的宠物名称周围的div 和类型。如果必须，请将它们放在一个 div 中。
最好使用1fr 代替50%。你会得到这个desired output

【讨论】：