Tailwind Padding 对输入和标签的作用不同

Question

我正在使用 tailwind 设计一个表单，这是其中的一个元素。

<label class="bg-gray-500 rounded rounded-r-none p-2">#</label>
<input type="text" class="rounded rounded-l-none focus:outline-none p-2 -ml-2">

它是这样显示的，正如你所看到的，我已经将 p-2 添加到两者中，所以理想情况下我希望两个高度相同，但显然情况并非如此，因为输入带来了一些默认高度。那么如何让它们的高度相同？

Answer 1

您可以将代码包装在弹性容器中。我已经删除了 margin-left class 以便它看起来更好。

/* For presentation */

body {
  padding: 10px;
  background: #E2E8F0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />
<div class="flex"> <!-- Wrapped inside flex container -->
  <label class="bg-gray-500 rounded rounded-r-none p-2">#</label>
  <input type="text" class="rounded rounded-l-none focus:outline-none p-2" placeholder="Same Height">
</div>

Tailwind Padding 对输入和标签的作用不同

Tailwind Padding not working same for input and label

html

css

tailwind-css