我在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>
1条答案
按热度按时间aij0ehis1#
我能想到的三种方法:
1.使用最后一个子对象,它的宽度超出具有下边框的父对象的宽度。
1.使用
1px
高的线性渐变在父元素上绘制边框。1.为父标签添加一个底部边框,并将子标签拉到边框上,使其与子标签对齐
在this Tailwind Play中查看所有这些解决方案。