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

【问题标题】：Aligning two elements, one left and the other right对齐两个元素，一个左一个右
【发布时间】：2019-07-14 00:25:55
【问题描述】：

我是第一次尝试 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 不是正确的方法，但我想不出办法让它发挥作用。

有什么想法吗？

【问题讨论】：

我下面的解决方案对你有用吗？
是的，确实如此。但是，在接受它之前，我想等一下，看看是否有人提出了不需要clearfix 和float（可能使用flex）的解决方案。感谢您的帮助。
我会给你另一个使用 flex 的解决方案
使用 flex 更新了我的答案

标签： tailwind-css

【解决方案1】：

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

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

【讨论】：