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

【问题标题】：How to align form label and input?如何对齐表单标签和输入？
【发布时间】：2021-07-19 11:07:31
【问题描述】：

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

布局需要这样，

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

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

工作 sn-p：

<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>

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

名字标签和输入应该像选择框一样从同一行开始。

请帮我将名字和姓氏放在同一行，名字输入属性需要与之前的选择保持一致。

原始表单设计：

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  --|

【问题讨论】：

查看此链接“tailwindui.com/components/application-ui/forms/form-layouts”
@RaviAshara，我找不到任何在左侧有标签并在右侧输入且在同一行中有两个输入的部分。请参考我的问题，它在左侧有标签并输入到它的对（重要的是名字和姓氏会在同一行）..我需要这样的..
尝试查看引导网格。使用行和列来构建表单
@ShubhamPeriwal，我无法更改库和所有.. 只需要通过顺风实现..

标签： javascript html css tailwind-css

【解决方案1】：

将class="flex" 添加到主框中，label 和 input 是：

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

<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>

【讨论】：

在您的解决方案中，名字（标签和输入）在选择用户标签下开始和结束。但这不是预期的。标签需要是直底，输入需要从哪里开始选择盒子开始..
名字与选择框对齐完成后，姓氏应显示在名字之后的同一行/行中..
您还可以查看上述问题中给出的布局结构以供参考，例如标签和输入如何开始和结束..

【解决方案2】：

您似乎正在使用一种旧方法来实现这一目标。在下面的代码中，我用CSS grids替换了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

以上是控件和标签如何发生的直观表示。 L 是标签，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>

（在整页中查看结果）

【讨论】：

请参考我的问题布局，上一行的输入/选择框对齐需要与下一行相同。如果选择标签和选择框有一定的宽度，那么同样需要在那里下一行输入/选择..有时它可能在同一行中有第二个输入，比如姓氏（我认为这在您的解决方案中很好用）..
再次感谢您的解决方案，因为它解决了我 90% 的查询。但这里的一个问题是，如果标签是任何输入的长度，则输入未正确对齐。例如。 .，如果我在第三行添加出生日期，那么它没有正确对齐。我可以理解我需要调整所有标签的边距，但还有其他有效的解决方法吗？
我已调整代码以正确对齐单元格。虽然，您需要调整网格列数以减少标签和输入之间的空间。请参考顺风网格以获得指导。
将列数增加到喜欢6。然后，使用col-span-2 使用1 列作为标签，2 列作为输入。所以输入比标签宽
好的，感谢您的努力.. 将参考 tailwind 文档进行进一步调整..