小贝子编程

Sencha Touch Tabbar的双色边框



我有几个问题:

我有一个标签栏(停靠在底部)有三个项目，我想有一个"分隔符"之间的元素。我尝试使用border-right CSS属性来模拟分隔符。

第一个问题是:是否有一种方法可以添加一个特定的类(进入sencha类层次结构)到我的栏的最后一项，并为这个元素关闭border-right属性?

另外，我希望边界由两条线组成，一条深灰色，另一条比第一条浅一点。第二个问题:我如何使用CSS设置这个?我知道如何使用完整的边框，但在这种情况下没有。

任何帮助都是非常感激的!

首先，您可以使用:last-child选择器将最后一个选项卡的右边框设置为none。其次，您可以使用box-shadow添加第二条垂直线(第一条是border-right):

: 

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

演示。

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium