多行制表符

Question

我正在努力解決HTM1 / Css問題。 我正在使用ul和li創建選項卡。 選項卡列表是動態的，最多可以擴展到10個選項卡。 問題在於列表在100％的寬度上折斷並且選項卡重疊。 是否可以計算列表何時達到接近100％的寬度，以便創建第二組選項卡？

這是一個示例的鏈接。

http://jsfiddle.net/syEJx/5/ 。

選項卡8,9和10的上部文本被切除。 我想避免那個

謝謝

Answer 1

CSS（沒有Javascript的幫助）無法以這種方式計算尺寸，但是如果您的li漂浮在沒有高度限制和恆定寬度的ul中，那么您的標簽將從左到右，從上到下填充。 另一個選擇可能是將ul設置為display：block，將li設置為display：inline。 這樣可能會更好，因為ul將在li周圍擴展。 我認為這就是您要尋找的行為。

Answer 2

這個怎么樣？

現場演示

新的CSS：

.tabs li
{
    display: inline-block;
    margin: 0 0 15px 0;

    /* ie7 hacks */
    zoom:1;
    *display: inline;
    _height: 20px
}

它包含一些必要的技巧，以使其在IE7中可以正常工作。 如果您不關心IE7，請隨時刪除這三行。