对齐两个元素，一个左对齐，另一个右对齐

Question

我第一次尝试使用 TailwindCSS，我正在尝试自定义下面寺庙最后一行中的表格。

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

我想在标题的右侧添加一个圆圈。就像是

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

  <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>use a<div>代替，因为 a<span>需要内容。然后，您可以将<h5>左侧和“圆圈”右侧浮动，但您需要将其添加clearfix到父 div。

此外，px-2您可以使用h-*与 width: 相同的类来定义高度，而不是添加类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>