css 有没有一种方法可以在daisyUI中提升标签以使用全宽度?

qxgroojn  于 2023-05-08  发布在  其他
关注(0)|答案(1)|浏览(245)

我在daisyUI中使用tabs来显示一组提升的选项卡。
然而,标签的“下划线”后,最后一个标签停止,我想它继续沿着所有的方式到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>
aij0ehis

aij0ehis1#

我能想到的三种方法:
1.使用最后一个子对象,它的宽度超出具有下边框的父对象的宽度。

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

1.使用1px高的线性渐变在父元素上绘制边框。

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

1.为父标签添加一个底部边框,并将子标签拉到边框上,使其与子标签对齐

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

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

相关问题