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;
}
精彩评论