主页 / coding / 问题 / 77327287
Accepted
StarkesWeb
Asked: 2023-10-20 05:53:44 +0800 CST

TailwindCSS：单选按钮边框看起来很奇怪

  • 772

在 Laravel 中，我使用 TailwindCSS 来设计前端页面的样式。

打开页面时，我有用于创建一组单选按钮的代码（在本示例中只有一个单选按钮）。这个想法是在每个单选按钮选项周围都有一个边框。但边界看起来很奇怪，我不知道为什么。

<form action="http://127.0.0.1:9000/checkout/select-address" method="post">
  <input type="hidden" name="_token" value="fogk984IV9VSX7LYYsClw0kjadlauJzPMCTWY9fE" />
  <ul class="list-none">
    <li class="">
      <input type="radio" class="peer hidden" id="address_1" name="address" value="1" required />
      <label for="address_1" class="w-full cursor-pointer rounded-lg border-4 border-gray-500 p-5 peer-checked:border-blue-600">
        <div class="block">Hi</div>
      </label>
    </li>
  </ul>
</form>

该代码的输出如下所示：

在此输入图像描述

我尝试使用此页面中的示例https://flowbite.com/docs/forms/radio/#advanced-layout

tailwind-css

1 个回答

  1. Best Answer

    这似乎是由于<label>元素默认是内联元素。然后，内部块级<div>元素会导致内联元素的框渲染出现意外行为。

    考虑通过类<label>应用使元素成为块级元素：display: blockblock

    <script src="https://cdn.tailwindcss.com/3.3.3"></script>

<form action="http://127.0.0.1:9000/checkout/select-address" method="post">
  <input type="hidden" name="_token" value="fogk984IV9VSX7LYYsClw0kjadlauJzPMCTWY9fE" />
  <ul class="list-none">
    <li class="">
      <input type="radio" class="peer hidden" id="address_1" name="address" value="1" required />
      <label for="address_1" class="w-full cursor-pointer rounded-lg border-4 border-gray-500 p-5 peer-checked:border-blue-600 block">
        <div>Hi</div>
      </label>
    </li>
  </ul>
</form>

    • 1

相关问题