Выравнивание двух элементов, один слева и другой справа - PullRequest
Новая
       14

Выравнивание двух элементов, один слева и другой справа

0 голосов
/ 20 февраля 2019

Я экспериментирую с TailwindCSS впервые и пытаюсь настроить таблицу в последнем ряду храма ниже.

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

Мне бы хотелосьдобавить круг в правой части заголовка.Что-то вроде

enter image description here

Я пробовал разные решения, и то, которое ближе к тому, что я хочу, это 

  <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 не правильный подход, но я не могу придумать, как заставить это работать.

Есть идеи?

1 Ответ

0 голосов
/ 20 февраля 2019

Не используйте <span>, используйте <div> вместо этого, поскольку <span> требует содержимого.Затем вы можете плавать <h5> влево и «круг» вправо, но вам нужно будет добавить clearfix к родительскому div.

Кроме того, вместо добавления классов px-2 вы можете простоопределить высоту, используя класс h-*, то же самое с шириной: 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>
...