2015-11-03 2 views
0

поэтому HTML код у него следующим образомвыравнивания Css ввинчивается

<ul class="tabs" data-persist="true"> 
    <li class="tab1"><a href="#view1">Dusk Drive</a></li> 
    <li class="tab2"><a href="#view2">Imagini</a></li> 
    <li class="tab3"><a href="#view3">Despre joc</a></li> 
</ul> 

CSS-код является

/* Tab Content - menucool.com */ 

ul.tabs 
{ 
    padding: 0px 0px; 
    font-size: 0; 
    margin:0; 
    list-style-type: none; 
    text-align: left; /*set to left, center, or right to align the tabs as desired*/ 
} 

ul.tabs li 
{ 
    display: inline; 
    margin: 0; 
    margin-right:0px; /*distance between tabs*/ 
} 

ul.tabs li a 
{ 
    font: normal 12px Verdana; 
    text-decoration: none; 
    position: relative; 
    padding: 0px 16px; 
    color: #000; 
    /*background: url(images/tab_left.png) left no-repeat;*/ 
    background-position: 0px 0px; 
} 

ul.tabs li a:visited 
{ 
    color: #000; 
} 

ul.tabs li a:hover 
{ 
    background-position: 0px 0px; 
    /*background: url(images/tab_left.png) left no-repeat;*/ 
} 

ul.tabs li.selected a, ul.tabs li.selected a:hover 
{ 
    background-position: 0px 0px; 
    position: relative; 
    top: 0px; 
    font-weight:bold; 
    /*background: url(images/tab_left.png) left no-repeat;*/ 
} 


ul.tabs li.selected a:hover 
{ 
    text-decoration: none; 
} 

div.tabcontents 
{ 
    background-color:#FFF; 
    border-radius: 0px 5px 5px 5px; 
} 

li.tab1 { 
    float: left; 
    background-image: url("images/tab_left.png"); 
    background-position: 0px 0px; 
    background-color: #33cccc; 
    border-radius: 5px 0px 0px 0px; 
} 

li.tab2 { 
    float: left; 
    background-image: url("images/tab_left1.png"); 
    background-position: 0px 0px; 
    background-color: #33cccc; 
    border-radius: 0px 0px 0px 0px; 
} 

li.tab3 { 
    background-image: url("images/tab_left2.png"); 
    background-position: 0px 0px; 
    background-color: #ffffcc; 
    border-radius: 0px 0px 0px 0px; 
} 


#view1 { 
    padding: 10px; 
    background-color: #33cccc; 
    border-radius: 0px 5px 5px 5px; 
} 

#view2 { 
    padding: 10px; 
    background-color: #ccffcc; 
    border-radius: 0px 5px 5px 5px; 
} 

#view3 { 
    padding: 10px; 
    background-color: #ffffcc; 
    border-radius: 0px 5px 5px 5px; 
} 

он производит графики, как enter image description here

вместо

enter image description here

только с желтым фоном из «Despre СОК» это то, что испортили

я просто не могу понять о том, как выровнять его, как и другие два-х

+0

Укажите ссылку на JSFiddle – Aakash

ответ

1

Использование clear:both после списка вкладок

<div class="clear"></div> 

.clear { 
    clear:both; 
} 
+0

тот же результат закладка третьего мисс выровнен –

+0

вам нужно добавить это после того, ул закрыт –

0

Редактировать ваш css.

li.tab3 { 
float: left; 
background-image: url("images/tab_left1.png"); 
background-position: 0px 0px; 
background-color: #ffffcc; 
border-radius: 5px 0px 0px 0px; 

}

Смежные вопросы