Javascript 如何对齐表单标签和输入？

我正在尝试在中做一个简单的布局

布局应该是这样的

Select User      | --- Select Box ---|

First Name       | First Name Input  |       Last Name    | Last Name  Input |

工作片段：

选择用户
一个
两个
三
名字
姓

将

class=“flex”

添加到带有

标签和
输入的主框中是：

（请注意，在代码段中的小框架中，由于没有足够的宽度显示在同一行上，它仍将包装这些框）



选择用户
一个
两个
三
名字
姓
将
class=“flex”
添加到带有
标签和
输入的主框中是：

（请注意，在代码段中的小框架中，由于没有足够的宽度显示在同一行上，它仍将包装这些框）



选择用户
一个
两个
三
名字
姓
您似乎在使用旧方法来实现这一点。在下面的代码中，我将width方法替换为

小型设备上有4个网格列，中型及以上设备上有8个网格列。在每个网格项中，
flex
与
items center
一起用于垂直对齐标签和输入

注意：标签使用
mr-2
类将
.5rem
边距添加到右侧，因此输入是分开的

1.
2.
3.
4.
5.
6.
7.
8.
L
C1/3
C2/3
C3/3
L
C1/3
C2/3
C3/3
L
C1/3
C2/3
C3/3
你似乎正在使用一种旧的方法来实现这一点。在下面的代码中，我将width方法替换为

小型设备上有4个网格列，中型及以上设备上有8个网格列。在每个网格项中，
flex
与
items center
一起用于垂直对齐标签和输入

注意：标签使用
mr-2
类将
.5rem
边距添加到右侧，因此输入是分开的

1.
2.
3.
4.
5.
6.
7.
8.
L
C1/3
C2/3
C3/3
L
C1/3
C2/3
C3/3
L
C1/3
C2/3
C3/3
检查这个链接“”@RaviAshara，在那里我找不到任何左标签右输入的部分，在同一行中有两个输入。。参考我的问题，它在左边有标签，在右边有输入（重要的是名字和姓氏将在同一行）。。我需要这样的…试着看看引导网格。使用行和列来构造您的form@ShubhamPeriwal，我无法更改库和所有。。只需要通过尾风实现..检查此链接“@RaviAshara，在那里我找不到任何左标签右输入且两个输入在同一行中的部分。。参考我的问题，它在左边有标签，在右边有输入（重要的是名字和姓氏将在同一行）。。我需要这样的…试着看看引导网格。使用行和列来构造您的form@ShubhamPeriwal，我无法更改库和所有。。只需通过tailwind实现。在您的解决方案中，名字（标签和输入）在“选择用户标签”下开始和结束。。但这不是期望。。标签必须是直底的，输入必须从选择框开始的位置开始。在完成名字与选择框对齐后，那么姓氏应该显示在名字后面的同一行中。您还可以看到上面问题中给出的布局结构，以供参考，例如标签和输入如何开始和结束。在您的解决方案中，名字（标签和输入）在“选择用户标签”下开始和结束。。但这不是期望。。标签必须是直底的，输入必须从选择框开始的位置开始。在完成名字与选择框对齐后，那么姓氏应该显示在名字后面的同一行中。你也可以看到上面问题中给出的布局结构，如标签和输入如何开始和结束。请参考我的问题布局，前一行中的输入/选择框对齐方式需要与下一行相同。。如果“选择标签”和“选择框”具有一定的宽度，则下一行“输入/选择”中也需要相同的宽度。。有时，它可能会在同一行中有第二个输入，如姓氏（我认为这在您的解决方案中很好）…再次感谢您的解决方案，因为它解决了我90%的查询。。但这里的一个问题是，如果标签是任何输入的长度，则输入没有正确对齐。。例如，如果我在第三行加上出生日期，那么它就没有正确对齐。。我可以理解我需要调整所有标签的边距，但是否有其他有效的解决方法？我已经调整了代码以正确对齐单元格。虽然