與CSS設計清單

Question

我正在尋找一種方法來防止水平內聯無序列表一旦包含在具有特定寬度（比列表更短）的元素中時會分裂爲單獨的行。該元素的「溢出」設置爲「隱藏」。

我發現創造這種效果的唯一方法是給予「UL」元素一個特定的寬度，但現在，我必須爲未知寬度的列表創建該效果！ （用戶可以添加項目到列表）。 還有其他方法嗎？它會幫助我這麼多！

謝謝大家

Answer 1

您是否嘗試在UL上添加「white-spacing：nowrap」？這可能會制定出：http://www.w3schools.com/CSS/pr_text_white-space.asp

Answer 2

嘗試這段代碼顯示列表項

#list { 
     width:476px; 
     height:40px; 
     margin-top:40px; 
     float:right; 
    } 

    #list ol { 
     padding:0; 
     margin:10px 0px 0px 27px; 
     float:left; 
     display:inline; 
    } 

    #list li { 
     padding:0; 
     margin:0; 
     display:inline; 
     float:left; 
    } 

Answer 3

試試這個：

ul.one-liner { white-space: nowrap; } 
ul.one-liner li { display: inline } 

Answer 4

[See it in action]

#container { 
    width: 100px; /* container's specific width */ 
    position: relative; 
    overflow: hidden; 
} 

ul { 
    position: absolute; 
    list-style-type: none; 
    width: 10000px; 
} 

ul li { 
    display: inline; 
}