我有一个包含 4 个列表项的无序列表。我想将第一个项目向右移动一点,然后将其留在那里,但其他 3 个项目我希望它们有更多的空间。我如何在 css 中实现这一点。
<ul className="mx-8 flex">
<li>©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;
}
如果您使用的是 Tailwind css,您可以添加 padding left 类。 https://tailwindcss.com/docs/padding p 表示填充,l 表示左侧,8 表示填充量,文档链接还指定了如何使用自定义填充量
<ul className="mx-8 flex">
<li class="pl-8">©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;">©2022 Airoflair</li>
<li>Cookie Policy</li>
<li>Refund Policy</li>
<li>Privacy Policy</li>
<li>terms & Conditions</li>
</ul>
我希望您在这种情况下使用
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>©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。
您可能想使用伪类: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>©2022 Airoflair</li>
<li>Cookie Policy</li>
<li>Refund Policy</li>
<li>Privacy Policy</li>
<li>terms & Conditions</li>
</ul>