开发者

How to position tabs to the right side of tab bar?

I need to have some tabs at the left side of the bar as usual and 2 tabs locate at the right end of the bar.

My jsFiddle file is here

The tab bar must be located at some point in the bottom part of the screen. Hence, I have to position it as absolute. Consequently, I cann开发者_开发知识库ot locate the tag relatively to the bar.

I've tried float: right but it didn't work either.

Any suggestion please?


Does this get you going the right direction:

.tab-box {
    margin: 0;
    position: absolute;  /*I need to fix these tabs at some point at the bottom part of the screen*/
    bottom: 248px;
    left: 0;    
}
#complexTab {
    width:100%;
}
.tab-box a {
    font-family:Helvetica, Arial, sans-serif;
    border: 1px solid #3A3D42;
    color: #666666;
    padding: 5px 5px;
    background-color: #eee;        
     float:right;       
    -webkit-border-top-left-radius: 4px;
    -moz-border-top-left-radius: 4px;    
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-right-radius: 4px;
    margin: -2px;   /*remove space btw tabs*/
}

.tab-box a:first-child {
    -webkit-border-top-left-radius: 0;
    -moz-border-top-left-radius: 0;
}

.tabcontent {
    height:248px;
    margin:0;
    padding:0;
    overflow:hidden;
    border-top:1px solid #3A3D42;

    background-color:#757D8A;

    box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;

    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.hiden {
    display : none; 
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜