gpt4 book ai didi

html tailwindcss 给 li 标签添加边框

转载 作者:行者123 更新时间:2023-12-05 04:19:13 27 4
gpt4 key购买 nike

我正在使用 tailwindcss创建一个侧面菜单,我需要一些事件指示器,所以我需要在 <li> 的末尾显示边框标签。

现在它的显示是这样的:

 <div class="bg-bgcolor h-screen">
<aside class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5">
<ul class="flex flex-col items-center">
<li>
<div class=" text-white bg-black p-2 rounded-2xl">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
stroke="currentColor" class="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</div>
</li>
</ul>
</aside>
</div>

enter image description here


我想这样做

enter image description here

最佳答案

您可以简单地添加这几个类:至 <li>标签:pr-2 border-black border-r-2

  1. 右填充
  2. 黑色边框
  3. 右侧边框

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>

<div class="bg-bgcolor h-screen">
<aside class="w-20 bg-white pt-2 rounded-2xl flex flex-col justify-center h-4/5">
<ul class="flex flex-col items-center">
<li class="pr-2 border-black border-r-2">
<div class="text-white bg-black p-2 rounded-2xl">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" class="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</div>
</li>
</ul>
</aside>
</div>
</body>

</html>

关于html tailwindcss 给 li 标签添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74907541/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com