使用 Tailwind 时标签不显示在输入框顶部
Label not displaying on top of input box when using Tailwind
我正在使用 HTML & Tailwind.css.
创建一个简单的登录表单
我想在 username 输入上方创建一个标签，但由于某种原因，标签出现在 username 输入内部盒子：
我不确定这是否与 tailwind 或我设置 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>
我应该如何解决才能使标签显示在 用户名 输入的顶部而不是其中？
您可以将 input 和 svg 包装在 div 中并使其成为 flex 这样 parent div 将有两个 children 像这样：
<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>
我正在使用 HTML & Tailwind.css.
创建一个简单的登录表单我想在 username 输入上方创建一个标签，但由于某种原因，标签出现在 username 输入内部盒子：
我不确定这是否与 tailwind 或我设置 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>
我应该如何解决才能使标签显示在 用户名 输入的顶部而不是其中？
您可以将 input 和 svg 包装在 div 中并使其成为 flex 这样 parent div 将有两个 children 像这样：
<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>