的DIV下去一行

這是我的代碼：
<li><div class="onleft"></div><a href="<? echo $site;?>top-likes" id="on">Top</a><div class="onright"></div></li>的DIV下去一行

這是我的CSS的：

.onleft{ 
     display:block; 
     position:relative; 
     color:#0d95d4; 
     float:left; 
     background-image:url(images/logonav_onleft.png); 
     background-repeat:no-repeat; 
     width:4px; 
     height:47px; 
     font-family: Helvetica, Tahoma, sans-serif; 
     font-size: 14px; 
     font-style: normal; 
     line-height: 27px; 
     font-weight: bold; 
     font-variant: normal; 
     text-decoration:none; 
    } 

    .onright{ 
     display:block; 
     position:relative; 
     color:#0d95d4; 
     float:right; 
     background-image:url(images/logonav_onright.png); 
     background-repeat:no-repeat; 
     width:4px; 
     height:47px; 
     font-family: Helvetica, Tahoma, sans-serif; 
     font-size: 14px; 
     font-style: normal; 
     line-height: 27px; 
     font-weight: bold; 
     font-variant: normal; 
     text-decoration:none; 
    } 

    #on{ 
     display:block; 
     margin-top:-10px; 
     color:#0d95d4; 
     float:left; 
     background: url(images/logonav_on.png) repeat-x; 
     width:100%; 
     height:47px; 
     font-family: Helvetica, Tahoma, sans-serif; 
     font-size: 14px; 
     font-style: normal; 
     line-height: 27px; 
     font-weight: bold; 
     font-variant: normal; 
     text-decoration:none; 
    }

我的問題是，而不是顯示在X重複左右圖像圖像，每個圖像顯示在一個新的行。我試圖與display物業解決它，但它沒有工作...
我想可能是這樣的，因爲寬度設置爲100％，在#on，但我真的不知道怎麼做才能做解決該問題。

有什麼建議嗎？謝謝！

鏈接：http://ilikeyou.tk/top-likes

來源

2011-08-05 Asaf Biton

我實在看不出您請求無解以某種方式獲取這些圖像。嘗試製作一個jsfiddle.net示例。 – Phil

@菲爾這裏是我的鏈接; http://ilikeyou.tk/top-likes –

標題聽起來像設置一個標記笑話。 – Problematic

要使用float:，你必須刪除position:和display:block;。

此外，我不知道如何在#on上100％減去.onleft和.onright的寬度（8像素）。我會把它減少到適用於大多數常見窗口寬度的東西。

.onleft{ 
/* display:block; <-- REMOVE THIS LINE */ 
/* position:relative; <-- REMOVE THIS LINE */ 
    color:#0d95d4; 
    float:left; 
    background-image:url(images/logonav_onleft.png); 
    background-repeat:no-repeat; 
    width:4px; 
    height:47px; 
    font-family: Helvetica, Tahoma, sans-serif; 
    font-size: 14px; 
    font-style: normal; 
    line-height: 27px; 
    font-weight: bold; 
    font-variant: normal; 
    text-decoration:none; 
} 

.onright{ 
/* display:block; <-- REMOVE THIS LINE */ 
/* position:relative; <-- REMOVE THIS LINE */ 
    color:#0d95d4; 
    float:right; 
    background-image:url(images/logonav_onright.png); 
    background-repeat:no-repeat; 
    width:4px; 
    height:47px; 
    font-family: Helvetica, Tahoma, sans-serif; 
    font-size: 14px; 
    font-style: normal; 
    line-height: 27px; 
    font-weight: bold; 
    font-variant: normal; 
    text-decoration:none; 
} 

#on{ 
/* display:block; <-- REMOVE THIS LINE */ 
    margin-top:-10px; 
    color:#0d95d4; 
    float:left; 
    background: url(images/logonav_on.png) repeat-x; 
    width: 98%; /* Adjust this to suit your design */ 
    height:47px; 
    font-family: Helvetica, Tahoma, sans-serif; 
    font-size: 14px; 
    font-style: normal; 
    line-height: 27px; 
    font-weight: bold; 
    font-variant: normal; 
    text-decoration:none; 
}

來源

2011-08-05 17:51:07 Sparky

謝謝你做到了！ :)畢竟它只是寬度而已！ –