Início / coding / Perguntas / 77327287
Accepted
StarkesWeb
Asked: 2023-10-20 05:53:44 +0800 CST

TailwindCSS: a borda do botão de opção parece estranha

  • 772

No Laravel, estou usando TailwindCSS para estilizar a página frontend.

Ao abrir a página, tenho este código para criação de um grupo de botões de opção (neste exemplo existe apenas um botão de opção). A ideia é ter uma borda ao redor de cada opção de botão de opção. Mas a fronteira parece estranha e não tenho ideia do porquê.

<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>

A saída deste código é semelhante a esta:

insira a descrição da imagem aqui

Tentei usar o exemplo desta página https://flowbite.com/docs/forms/radio/#advanced-layout

tailwind-css

1 respostas

  1. Best Answer

    Parece que <label>os elementos são elementos embutidos por padrão. O elemento de nível de bloco interno <div>causa o comportamento inesperado da renderização de caixa do elemento embutido.

    Considere tornar o <label>elemento um elemento em nível de bloco aplicando display: blockpor meio da blockclasse:

    <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

relate perguntas