無法水平列出UL水平溢出（和滾動）

我想獲得一個無序列表水平列出（用float：左），但它拒絕水平溢出。相反，它會自動在下一行（進而溢出，甚至溢出-Y：？沒有，它會自動創建一個垂直滾動條的任何想法無法水平列出UL水平溢出（和滾動）

<style type="text/css"> 
    ul { 
     height:15px; 
     width:400px; 
     overflow-y:none; 
     overflow-x:auto; 
    } 

    li { 
     float:left; 
    } 

</style> 

<body> 
    <div> 
     <ul id="someList"> 
      <li>element 1</li> 
      <li>element 2</li> 
      <li>element 3</li> 
      <li>element 4</li> 
      <li>element 5</li> 
      <li>element 6</li> 
      <li>element 7</li> 
     </ul> 
    </div> 
</body>

來源

2011-06-28 achow

我可以問在什麼情況下您想在無序列表上使用水平滾動條嗎？ – Zoidberg

如果我理解正確的話，這應該是它：

http://jsfiddle.net/Uyc8d/

我切換到display: inline-block（而不是float: left），和我使用white-space: nowrap防止纏繞。

ul { 
    width: 400px; 
    overflow-x: scroll; 
    background: #ccc; 
    white-space: nowrap 
} 

li { 
    display: inline-block; 

    /* if you need ie7 support */ 
    *display: inline; 
    zoom: 1 
}

來源

2011-06-28 22:29:23 thirtydot

我的印象是先生。 – Zoidberg

謝謝你，先生。令人印象深刻。 – achow

white-space：nowrap;幫助我，謝謝！ –

無法水平列出UL水平溢出（和滾動）

回答

相關問題