Question

我有问题：

我有一个Tabbar（停靠在底部）有三个项目，我想要一个＆＃34;分隔符＆＃34;这些元素之间。我试图使用border-right CSS属性来模拟分隔符。

第一个问题是：有没有办法将一个特定的类（进入sencha类层次结构）添加到我的栏的最后一项，并且对于这个元素，关闭右边的属性？

另外，我希望边框由两条线组成，一条是深灰色，另一条是比第一条稍微亮一点。第二个：我如何使用CSS设置它？我知道如何用完整的边框做到这一点但在这种情况下没有。

非常感谢任何帮助！

Answer 1

首先，您可以使用:last-child选择器将最后一个标签的边框权限设置为none。其次，您可以使用box-shadow添加第二条垂直线（第一条是border-right）：

<强> HTML ：

<ul>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<强> CSS ：

ul {
  list-style:none;
  padding:0;
}
ul > li {
  width:33%;
  height:100px;
  float:left;    
  border-right: 1px solid darkgray;
  box-shadow:  1px 0 0 white, 2px 0 0 lightgray;
  text-align:center;
}
ul > li:last-child {
  border-right:none;  
  box-shadow:none;
}

Sencha Touch Tabbar中的双色边框

1 个答案:

Demo.