html - 对齐两个元素，一个左一个右

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>而不是 as a <span>requires 内容。然后，您可以将左侧和“圆圈”向右浮动<h5>，但您需要将其添加clearfix到父 div。

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