logo标签列表

Html tailwindcss 给 li 标签添加边框

htmlcsstailwind-cssborder
3

我正在使用 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

2个回答
2
你可以简单地将以下几个类添加到 <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>

0

使用“border-r-2”类以及其他带有边框变体的类（如“border-r-4”，“border-r-8”等）在Tailwind中将正确的边框应用于元素。

在您的情况下，您需要将“border-r-2”应用于像<li>这样的元素：

<li class="border-r-2">

这里的值“2”表示边框宽度，

有关更多信息，请参见以下链接： https://tailwindcss.com/docs/border-width

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接