Question

你好，我从[Codrope] [1]

获得了Tab Styles Inspiration

但每个标签都有5个标签，它工作正常，但每当我尝试删除5个标签并保留4个标签作为我的要求，因此拖动底部边框不起作用！

请任何人都可以为我的标签提供最佳解决方案，告诉我如何保留标签

这是我喜欢的来源

＆＃13;

<a href="http://codepen.io/fazurrehman/pen/ONRmwN">See here my demo on codepen.io</a>

＆＃13;

Answer 1

您遇到的问题是css

上的Move the line

之前：

/* Move the line */
.tabs-style-linemove nav li:first-child.tab-current ~ li:last-child::before {
    -webkit-transform: translate3d(-400%,0,0);
    transform: translate3d(-400%,0,0);
}

.tabs-style-linemove nav li:nth-child(2).tab-current ~ li:last-child::before {
    -webkit-transform: translate3d(-300%,0,0);
    transform: translate3d(-300%,0,0);
}

.tabs-style-linemove nav li:nth-child(3).tab-current ~ li:last-child::before {
    -webkit-transform: translate3d(-200%,0,0);
    transform: translate3d(-200%,0,0);
}

.tabs-style-linemove nav li:nth-child(4).tab-current ~ li:last-child::before {
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

后：

/* Move the line */
.tabs-style-linemove nav li:first-child.tab-current ~ li:last-child::before {
    -webkit-transform: translate3d(-300%,0,0);
    transform: translate3d(-300%,0,0);
}

.tabs-style-linemove nav li:nth-child(2).tab-current ~ li:last-child::before {
    -webkit-transform: translate3d(-200%,0,0);
    transform: translate3d(-200%,0,0);
}

.tabs-style-linemove nav li:nth-child(3).tab-current ~ li:last-child::before {
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

选项卡样式灵感不能正常使用4个选项卡

1 个答案: