使用尾风时不显示在输入框顶部的标签

Question

我正在使用HTML & Tailwind.css创建一个简单的登录表单。

我想在用户名输入上方创建一个标签，但由于某种原因，标签出现在用户名输入框中：

​

​

我不确定这是否与顺风或我设置HTML的方式有关。

下面是用于用户名输入的代码：

<label for="username">Enter your username here:</label>
                          <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" id = "username" type="text" placeholder="username">

为了以防万一，下面是我完整的HTML部分(我不确定它是否与干扰我的用户名输入的另一个元素有关)：

<section class="bg-slate-900">
          <div class="flex flex-wrap">
            <div class="pt-7 lg:pt-16 pb-6 w-full lg:w-1/2" >
              <div class="max-w-md mx-auto">
               
                <div>
                  <div class="mb-7 px-3">
                    <span class="text-gray-400 text-xl ">Join a yoga session today!</span>
                    <h3 class="text-3xl font-bold text-white" style="padding-top: 3%">Login to your account</h3>
                  </div>
                  <form action="">
                    <div class="flex flex-wrap">
                    </div>
                    <div class="mb-3 flex p-4 mx-2 bg-gray-800 rounded">
                      <label for="username">Enter your username here:</label>
                      <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" id = "username" type="text" placeholder="username">
                      <svg class="h-6 w-6 ml-4 my-auto text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                      </svg>
                    </div>
                    <div class="mb-6 flex p-4 mx-2 bg-gray-800 rounded">
                      <input class="w-full text-xs text-gray-50 bg-gray-800 outline-none" type="password" placeholder="Enter your password">
                      <button>
                        <svg class="h-6 w-6 ml-4 my-auto text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                        </svg>
                      </button>
                    </div>
                    <div class="px-3 text-center">
                      <button class="mb-2 w-full py-4 bg-green-600 hover:bg-green-700 rounded text-sm font-bold text-gray-50 transition duration-200">Sign Up</button>
                      <span class="text-gray-400 text-xs">
                        <span>Don't have an account?</span>
                        <a class="text-green-600 hover:underline" href="#">Create One Today!</a>
                      </span>
                      <p class="mt-16 text-xs text-gray-400"><a class="underline hover:text-gray-500" href="#">Policy privacy</a> and <a class="underline hover:text-gray-500" href="#">Terms of Use</a></p>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <div class="hidden lg:block relative w-full lg:w-1/2 bg-green-600">
              <div class="absolute bottom-0 inset-x-0 mx-auto mb-12 max-w-xl text-center" style="z-index: 10;">
                <img class="lg:max-w-xl mx-auto" src="atis-assets/illustrations/pablo-coming-soon-dark-mono.png" alt="">
                <h2 class="mb-2 text-2xl text-white font-bold">So much more than a business analytics tool</h2>
                <div class="max-w-lg mx-auto">
                  <p class="mb-6 text-gray-50 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
                </div>
                <a class="inline-block py-2 px-6 leading-loose rounded-t-xl rounded-l-xl bg-white hover:bg-gray-500 text-gray-900 hover:text-white transition duration-200 font-bold" href="#">Get Started</a>
                <div class="mt-12 flex justify-center space-x-3">
                  <button class="p-1 bg-green-500 rounded-full"></button>
                  <button class="p-1 bg-green-500 rounded-full"></button>
                  <button class="p-1 bg-white rounded-full"></button>
                  <button class="p-1 bg-green-500 rounded-full"></button>
                </div>
              </div>
            </div>
            <div class="lg:hidden bg-green-600 w-full">
              <div class="relative w-full">
                <img class="relative mx-auto max-w-sm mt-4 mb-4 block" src="atis-assets/illustrations/pablo-coming-soon-dark-mono.png" alt="">
                <div class="flex justify-center space-x-3">
                  <button class="p-1 bg-green-500 rounded-full"></button>
                  <button class="p-1 bg-green-500 rounded-full"></button>
                  <button class="p-1 bg-white rounded-full"></button>
                  <button class="p-1 bg-green-500 rounded-full"></button>
                </div>
              </div>
              <div class="py-10 px-3 text-center" style="z-index: 10;">
                <h2 class="mb-2 text-2xl text-white font-bold">So much more than a business analytics tool</h2>
                <p class="mb-6 text-gray-50 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur nisl sodales egestas lobortis.</p>
                <a class="py-2 px-6 rounded-t-xl rounded-l-xl rounded-l-xl bg-white hover:bg-gray-500 text-gray-600 hover:text-white transition duration-200 font-bold" href="#">Get Started</a>
              </div>
            </div>
          </div>
        </section>

我应该修复什么，以便标签显示在用户名输入的顶部，而不是在它中？

Answer 1

您可以将input和svg封装在div中，并使其成为flex，这样父div就会有两个这样的子级：

 <div class="mx-2 mb-3 rounded bg-gray-800 p-4">
              <label for="username" class="text-white">Enter your username here:</label>
              <div class="flex">
                <input class="w-full bg-gray-800 py-2 text-xs text-gray-50 outline-none" id="username" type="text" placeholder="username" />
                <svg class="my-auto ml-4 h-6 w-6 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                </svg>
              </div>
            </div>

https://play.tailwindcss.com/r3GvQOeheR