讓UL僅水平擴展

我需要動態地將LI元素添加到長度爲「n」的UL元素。在HTML現在我已經是...讓UL僅水平擴展

<div class="center"> 
    <ul id="tabList" class="parent"> 
     <!-- I am adding LI using jQuery here. --> 
     <br class="clearfix" /> 
    </ul> 
</div>

這裏採用的CSS是...

.center 
{ 
    top: 0; 
    margin: 0 15%; 
    width: 70%; 
    overflow: hidden; 
} 

.center ul.parent 
{ 
    left: 0; 
    height: 100%; 
    position: relative; 
} 

.center ul.parent li 
{ 
    float: left; 
    margin: 0 5px; 
} 

.center ul.parent li .tab 
{ 
    position: relative; 
    padding: 5px 10px; 
    background: transparent; 
    font-size: 16px; 
    font-weight: bold; 
    line-height: 49px;  
    border: 1px solid rgba(0, 0, 0, 0.1); 
    color: #A9D0F5; 
    background: rgba(0, 0, 0, 0.1); 
    border-radius: 3px; 
}

我必須根據其子集.parent寬度，爲了不讓寬度UL在這裏垂直擴展。有沒有我可以用來修復寬度設置的方法？我不喜歡根據孩子積累的寬度設置寬度。

來源

2011-11-23 Neutralizer

你可以把圖像看到的是你想要的嗎？ – Galled

如果您將在docs.google.com上打開新電子表格，則會在底部注意到表格選項卡。我想創造類似的東西。 – Neutralizer

當jQuery添加li的寬度超過屏幕的70％時，您希望發生什麼？ – bookcasey

你想要類似this？

爲了避免新的LI下降，我放了一個大智慧。

.center ul.parent 
{ 
    width: 1000%; 
}

但我認爲你的問題在這裏：

.center 
{ 
    width: 70%; 
    overflow: hidden; 
}

會到來的時間，其中的.center將不允許展示新LI秒。

我推薦給你，因爲你將添加LI標籤使用jQuery，檢測.center ul.parent的第一寬度和每個新LI除了編程方式增加它。

從你告訴我的意見就是我再拍演示，看看它是否幫助你 - >http://jsfiddle.net/Galled/KQqYm/4/

來源

2011-11-23 19:07:39 Galled

我現在正在做同樣的事情。但我想如果有一種CSS方式來做到這一點，那將是美好的。 – Neutralizer

有沒有另外一種方法可以做到這一點，假設中心必須有70％的寬度，但溢出：隱藏將被刪除？我的意思是任何其他方式由jQuery或CSS？ – Neutralizer

@UmairAshraf爲什麼你會刪除'overflow：hidden'你需要看到所有的標籤？也許你可以使用'overflow：auto' – Galled

讓UL僅水平擴展

回答

相關問題