对齐两个元素，一左一右

Question

我是第一次尝试使用 TailwindCSS，我正在尝试自定义下面神庙最后一行的 table。

https://www.tailwindtoolbox.com/templates/admin-template-demo.php

我想在 header 的 right-hand 一侧添加一个圆圈。像

我尝试了不同的解决方案，最接近我想要的是

  <div class="border-b-2 rounded-tl-lg rounded-tr-lg p-2">
      <h5 class="uppercase"><%= host.name %></h5>
      <span class="rounded-full px-2 py-2 float-right"></span>
    </div>

将绿点放在下边框上。显然 float-right 不是正确的方法，但我想不出一种方法来实现它。

有什么想法吗？

Answer 1

不要使用 <span>，而是使用 <div>，因为 <span> 需要内容。然后，您可以将 <h5> 向左浮动，将 'circle' 向右浮动，但您需要将 clearfix 添加到父级 div.

此外，您可以使用 class h-* 定义高度而不是添加 classes px-2 这与宽度相同：w-*。我还使用 class bg-green.

设置了绿色背景色

<div class="border-b-2 rounded-tl-lg rounded-tr-lg p-2 clearfix">
    <h5 class="uppercase float-left"><%= host.name %></h5>
    <div class="rounded-full h-3 w-3 circle bg-green float-right"></div>
</div>

在这里查看我的代码笔：https://codepen.io/CodeBoyCode/pen/jdRbQM

或者您可以使用 flex:

<div class="border-b-2 rounded-tl-lg rounded-tr-lg p-2 flex">
    <h5 class="uppercase flex-1 text-center"><%= host.name %></h5>
    <div class="rounded-full h-3 w-3 circle bg-green"></div>
</div>

对齐两个元素，一左一右

Aligning two elements, one left and the other right

html

css

tailwind-css