CSS 间距 - 使用顺风

问题描述 投票:0回答:3

我有一个包含 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;
}
css tailwind-css
3个回答
0
投票

如果您使用的是 Tailwind css,您可以添加 padding left 类。 https://tailwindcss.com/docs/padding p 表示填充,l 表示左侧,8 表示填充量,文档链接还指定了如何使用自定义填充量

<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>

0
投票

我希望您在这种情况下使用

flex
。制作两个
<span>
,并将第一个
li
放在第一个跨度中,其余四个
li
放在第二个跨度中。

在第一个跨度中添加

flex

现在在第二个跨度中再次添加类

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]
tailwind 类而不是使用 CSS。


0
投票

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

<script src="https://cdn.tailwindcss.com"></script>
<ul class="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>

© www.soinside.com 2019 - 2024. All rights reserved.