有没有办法让 daisyUI 中的提升选项卡使用全宽度？

Question

我正在使用tabsdaisyUI 来显示一组提升的选项卡。

然而，选项卡“下划线”在最后一个选项卡之后停止，我希望它一直继续到 div 的边缘。

有没有一种简单的方法可以实现这一目标？

<div class="tabs">
    <a class="tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
    <a class="tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
</div>

Answer 1

我能想到的三种方法：

1. 使用最终的子级，该子级的宽度超出具有底部边框的父级的宽度。

   <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
   <script src="https://cdn.tailwindcss.com"></script>
   
   <div class="tabs">
     <a class="tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
     <span class="grow border-b border-base-300"></span>
   </div>

2. 使用 -high 线性渐变在父元素上绘制边框1px。

   // Needed to have the `base-300` color be available in this demonstration since we are using
   // Daisy UI via CDN. In "real" usage with the Daisy UI Tailwind plugin, all the colors would
   // automatically be available for use.
   tailwind.config = {
     theme: {
       extend: {
         colors: {
           'base-300': 'hsl(var(--b3) / <alpha-value>)',
         },
       },
     },
   };

   <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
   <script src="https://cdn.tailwindcss.com/3.3.3"></script>
   
   <div class="tabs bg-[linear-gradient(theme(colors.base-300),theme(colors.base-300))] bg-bottom bg-no-repeat bg-[length:100%_1px]">
     <a class="tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
     <a class="tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
   </div>

3. 为父项添加底部边框，然后将子选项卡拉到边框上，使其与它们对齐

   // Needed to have the `base-300` color be available in this demonstration since we are using
   // Daisy UI via CDN. In "real" usage with the Daisy UI Tailwind plugin, all the colors would
   // automatically be available for use.
   tailwind.config = {
     theme: {
       extend: {
         colors: {
           'base-300': 'hsl(var(--b3) / <alpha-value>)',
         },
       },
     },
   };

   <link href="https://cdn.jsdelivr.net/npm/daisyui@3.5.1/dist/full.css" rel="stylesheet" type="text/css" />
   <script src="https://cdn.tailwindcss.com/3.3.3"></script>
   
   <div class="tabs border-b border-base-300">
     <a class="-mb-px tab tab-lifted tab-active" wire:click="omitted" id="tab1">Tab1</a>
     <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab2">Tab2</a>
     <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab3">Tab3</a>
     <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab4">Tab4</a>
     <a class="-mb-px tab tab-lifted" wire:click="omitted" id="tab5">Tab5</a>
   </div>

在这个 Tailwind Play中查看所有这些解决方案。