CSS间距-使用顺风

Question

我有一个无序列表和4个列表项目。我想把第一个项目移到右边，然后把它留在那里，但其他的3个项目，我希望他们有更多的空间。我将如何在css中实现这一点。

<ul className="mx-8 flex">
  <li>&copy;2022 Airoflair</li>
  <li>Cookie Policy</li>
  <li>Refund Policy</li>
  <li>Privacy Policy</li>
  <li>terms & Conditions</li>
</ul>

到目前为止，这是我的css：

li {
  font-size: 10px;
  margin-left: 30px;
}

Answer 1

如果您正在使用尾风css，您可以添加填充左类。https://tailwindcss.com/docs/padding p表示填充，l if表示左侧，8表示填充量，docs链接还指定如何使用自定义的填充量。

<ul className="mx-8 flex">
   <li class="pl-8">&copy;2022 Airoflair</li>
   <li>Cookie Policy</li>
   <li>Refund Policy</li>
   <li>Privacy Policy</li>
   <li>terms & Conditions</li>
</ul>

如果没有顺风，您可以通过更改样式来获得相同的结果，例如

<ul className="mx-8 flex">
    <li style="padding-left: 2rem;">&copy;2022 Airoflair</li>
    <li>Cookie Policy</li>
    <li>Refund Policy</li>
    <li>Privacy Policy</li>
    <li>terms & Conditions</li>
</ul>

Answer 2

您可能希望使用伪类：https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes。这只会影响第一个孩子。

<ul className="mx-8 flex first:pl-8">
    <li>&copy;2022 Airoflair</li>
    <li>Cookie Policy</li>
    <li>Refund Policy</li>
    <li>Privacy Policy</li>
    <li>terms & Conditions</li>
</ul>

Answer 3

我希望您在这种情况下使用flex。创建两个<span>，并将第一个li放在第一个span中，其余四个li放在第二个span中。

在第一个跨度中添加flex。

现在，在第二个span中，再次添加类flex (嵌套)，使它们位于行中，并添加space-x-8，以在4 <li>s之间设置间距。

​

<script src="https://cdn.tailwindcss.com"></script>
<ul class=" flex justify-around text-[10px]">
  <span>
  <li>&copy;2022 Airoflair</li>
  </span>
  <span class="flex space-x-8">
  <li>Cookie Policy</li>
  <li>Refund Policy</li>
  <li>Privacy Policy</li>
  <li>terms & Conditions</li>
  </span>
</ul>

​

我建议您添加text-[30px]顺风类，而不是使用CSS。