Css对齐拧紧

Question

所以html代码就在其后面

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

它生成图形为

而不是

只有黄色背景＆＃34; Despre joc＆＃34;那是什么搞砸了

我无法弄清楚如何将其与其他两个人对齐

Answer 1

在列表标签​​

之后使用clear:both

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

.clear {
   clear:both;
}

Answer 2

编辑你的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;

}