如何用TailwindCSS水平设置输入和按钮

Question

我需要像这样水平地设置输入按钮，并且它与下面的代码一起工作。

​

​

​

< label
for = "rootFolder"
class = "flex mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" >
  Processing Directory <
  /label> <
  div class = "mb-6 flex" >
  <
  input type = "rootFolder"
id = "rootFolder"
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder = ""
required / >
  <
  button class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" >
  add <
  /button> <
  /div>

​

但我需要改变添加文字到韩语，所以我只是改变它，但它使它像这样。

不仅文本看起来是垂直的，而且它还改变了输入标签的大小。有什么问题吗？

​

​

Answer 1

你给input的input有个问题。我删除了它并使用了grow，同时也删除了button的宽度。见下面的链接：

https://play.tailwindcss.com/kRknIVE2Ra