Why is Box Alignment not working?

Asked

Viewed 23 times

0

I’d like to create a space between Register and Remember, but it’s not working.

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div classs="container ">
    <div class="flex flex-col min-h-screen  space-y-4 border-2 items-center justify-center py-12 px-4">  
    <h2 class="text-center text-3xl font-extrabold text-gray-900">Todo Authentication</h2>
        <input type="text" class="border w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Username" />
        <input type="password" class="border  w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Password" />
        <div class="flex w-2/5 justify-between">
          <a href="">Register</a>
          <span class="space-x-2">
         <input type="checkbox">
Remember

</span>
         </div>
        <button class="border w-2/5 p-4 text-lg font-bold bg-blue-200 border-black rounded">Log in</button>
    </div>
  </div>
</body>

Updating

I solved the problem by placing a width between these elements.

css tailwind

  • What do you mean space, what kind of space, just a small margin? Or one on one side and the other on the other? It wasn’t very clear what you really want as a final result

  • I updated the result with the FIX I wanted

1 answer

0


I suggest you create a new file to put styles you need and put according to a name/class/id

Without the file you can use the style="propriedade:valor, for what you want, which is to create a space would style="margin-right: 10px" by tag <a> or else style="margin-left: 10px" for the tag <input>

Here are two examples for each tag, (assuming you will style from the same html)

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div classs="container ">
    <div class="flex flex-col min-h-screen  space-y-4 border-2 items-center justify-center py-12 px-4">  
    <h2 class="text-center text-3xl font-extrabold text-gray-900">Todo Authentication</h2>
        <input type="text" class="border w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Username" />
        <input type="password" class="border  w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Password" />
        <div class="flex justify-between">
          <a href="" style="margin-right: 10px">Register</a>
          <input type="checkbox">Remember
        </div>
        <button class="border w-2/5 p-4 text-lg font-bold bg-blue-200 border-black rounded">Log in</button>
    </div>
  </div>
</body>

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div classs="container ">
    <div class="flex flex-col min-h-screen  space-y-4 border-2 items-center justify-center py-12 px-4">  
    <h2 class="text-center text-3xl font-extrabold text-gray-900">Todo Authentication</h2>
        <input type="text" class="border w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Username" />
        <input type="password" class="border  w-2/5 py-2 px-2 focus:placeholder-black " placeholder="Password" />
        <div class="flex justify-between">
          <a href="">Register</a>
          <input type="checkbox" style="margin-left: 10px">Remember
        </div>
        <button class="border w-2/5 p-4 text-lg font-bold bg-blue-200 border-black rounded">Log in</button>
    </div>
  </div>
</body>

Browser other questions tagged css tailwind

You are not signed in. Login or sign up in order to post.