如何使用TabView在Tabs之间添加空格?

时间:2018-02-20 23:34:59

标签: css angular typescript primeng

我使用TabView作为我的标签,我的问题是我不知道如何将标签4和5 一直移动到右侧可能会做类似的事情:

float: right

基本上我想在Tab 3和Tab 4之间添加一个空格,以便Tab 4和5可以一直移动到右侧。最后,我想添加一个黄色的背景颜色,以便从1到5的所有选项卡都可以具有相同的背景。

这是我的代码: PLUNKER

1 个答案:

答案 0 :(得分:1)

你可以试试这个..

/* set diplay of the container */
.ui-tabview .ui-tabview-nav{
  display:flex;
  flex-flow: row nowrap;
}

/* this will make a margin to the left of tab 4
that will make tab 4 and tab 5 to float/positioned to right */
.ui-tabview.ui-tabview-top > .ui-tabview-nav li:nth-child(4){
  margin-left:auto;
}

/* change all the background of the tab button */
.ui-state-default{
  background:yellow!important;
}
/* change the background of the tab container */
.ui-tabview .ui-tabview-nav{
  background:yellow!important;
}

请参阅此实时代码https://plnkr.co/edit/mcgS1yIWG1Y0flgA9hbc?p=preview

希望这有帮助。

相关问题