如何对齐表格 label 并输入？

Question

我正在尝试在tailwindcss中进行简单的布局。

布局需要是这样的，

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

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

工作片段：

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div className="flex flex-wrap w-full"> <form class="w-full"> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-full-name" > Select User </label> </div> <div class="md:w-1/3"> <select class="border-2 border-gray-600" name="users" id="users"> <option value="user1">One</option> <option value="user2">Two</option> <option value="user3">Three</option> </select> </div> </div> <div class="md:flex md:items-center mb-6"> <div class="flex w-full"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-password" > First Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="first-name" type="text" placeholder="First Name" /> </div> </div> <div class="flex w-full"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="last-name" > Last Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="inline-password" type="text" placeholder="Last Name" /> </div> </div> </div> </form> </div>

在这里，我没有正确对齐名字和姓氏的布局。

名字 label 和输入应该从同一行开始，如 select 框。

请帮我将名字和姓氏放在同一行，名字输入属性需要与以前的 select 对齐。

原始表格设计：

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

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

Date of Birth    | - DOB input Box - |

City             | - City Input    - |       Zip          | -- Zip  Input  --|

Answer 1

您似乎正在使用一种旧方法来实现这一目标。 在下面的代码中，我用CSS grids替换了 width 方法。

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

注意：标签使用mr-2 class 向右添加.5rem边距，所以输入是分开的

1	2	3	4	5	6	7	8
大号	C1/3	C2/3	C3/3
大号	C1/3	C2/3	C3/3	大号	C1/3	C2/3	C3/3

以上是控件和标签如何发生的可视化表示。 L是 label 和C是对照。

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div className="flex flex-wrap w-full"> <form class="w-full"> <div class="grid grid-cols-4 md:grid-cols-8 gap-3"> <:-- Grid Container --> <div class="flex items-center"> <:-- Grid cell --> <label class="text-gray-500 font-bold mb-1 md:mb-0 mr-2 whitespace-nowrap" for="inline-full-name">Select User</label> </div> <div class="flex items-center col-span-3"> <:-- Grid cell --> <select class="border-2 border-gray-600 w-full" name="users" id="users"> <option value="user1">One</option> <option value="user2">Two</option> <option value="user3">Three</option> </select> </div> <div></div><div></div><div></div><div></div> <div class="flex items-center"> <:-- Grid cell --> <label class="text-gray-500 font-bold mb-1 md:mb-0 whitespace-nowrap mr-2" for="inline-password">First Name</label> </div> <div class="flex items-center col-span-3"> <:-- Grid cell --> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="first-name" type="text" placeholder="First Name" /> </div> <div class="flex items-center"> <!-- Grid cell --> <label class="block text-gray-500 font-bold mb-1 md:mb-0 whitespace-nowrap mr-2" for="last-name">Last Name</label> </div> <div class="flex items-center col-span-3"> <!-- Grid cell --> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="inline-password" type="text" placeholder="Last Name" /> </div> </div> </form> </div>

（查看整页以查看结果）

Answer 2

使用label将class="flex"添加到主框， input为：

（请注意，在片段中的小框架中，它仍会包裹盒子，因为没有足够的宽度将它们显示在同一行）

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <div className="flex flex-wrap w-full"> <form class="w-full"> <div class="md:flex md:items-center mb-6"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-full-name" > Select User </label> </div> <div class="md:w-1/3"> <select class="border-2 border-gray-600" name="users" id="users"> <option value="user1">One</option> <option value="user2">Two</option> <option value="user3">Three</option> </select> </div> </div> <div class="md:flex md:items-center mb-6"> <div className="flex w-full" class="flex"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="inline-password" > First Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="first-name" type="text" placeholder="First Name" /> </div> </div> <div className="flex w-full" class="flex"> <div class="md:w-1/6"> <label class="block text-gray-500 font-bold mb-1 md:mb-0" for="last-name" > Last Name </label> </div> <div class="md:w-1/3"> <input class="appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-gray-800" id="inline-password" type="text" placeholder="Last Name" /> </div> </div> </div> </form> </div>