如何修改Zurb Foundation的內聯列表以將列表修復爲單行，從而允許溢出：滾動？

我按照Foundation's documentation所述使用內聯列表來顯示圖像列表。如何修改Zurb Foundation的內聯列表以將列表修復爲單行，從而允許溢出：滾動？

這工作正常，但如果圖像列表超過了包含元素的寬度，我希望它們保持在一行，並有溢出滾動：overflow: scroll。

似乎是li（包含我的情況下的圖像）和他們默認顯示：塊樣式的問題。

我怎麼會改變從這個名單：

inline list starting a new row

。。。到單行中的項目列表，我可以水平滾動以查看溢出頁面的圖像？

來源

2014-02-05 Ecnalyr

我找到了一個解決方案通過

父元素的樣式設置爲overflow:scroll;
的ul元素的樣式設置爲display: inline-flex
然後給li SA最小寬度，在我案例min-width:200px;

我確切的代碼（在Rails應用程序中使用HAML）：

%div{ id: 'type-of-position', style:'width:100%; overflow:scroll;' } 
    %ul{ class: 'inline-list', style:'display: inline-flex' } 
    - @employer_types.each do |tt| 
     %li{ class: 'inactive', style:'min-width:200px;', id: tt.id }=image_tag tt.image.url

我不知道這是否是最好的解決方法，但它的工作要完成什麼，我要怎樣做。

來源

2014-02-05 18:08:02 Ecnalyr

柔性盒很酷。可能是一個很好的解決方案但它是新的（http://caniuse.com/flexbox）我不知道你需要支持哪些瀏覽器 –

@NicoO甚至沒有聽說過。很酷，謝謝！ – Ecnalyr

inline-list不適合您的用例。 inline-list增加了一個float:left到所有項目，讓他們成爲。一般來說，這是你需要的。但是，達到父項目結束時，float:left將會中斷。你需要元素停止分解。這可以通過提供更廣泛的父項目進行歸檔。

更新更好的解決方案的一個前： http://jsfiddle.net/NicoO/RRd2L/1/

追加CSS是這樣的：

.inline-list.real-inline 
{ 
    white-space: nowrap; 
    overflow: auto; 
} 

.inline-list.real-inline > li 
{ 
    float: none; 
    display: inline-block; 
}

然後是類「實時在線」添加到所需的列表。有點哈克，但它的作品...你一定會找到一個更好的名字。

- 以前的解決方案（的作品，但不是很好）：我建議你添加一個新的類像這樣的：

.horizontal-scroll-pane 
{ 
    overflow: auto; 
} 

.horizontal-scroll-pane ul.inline-list 
{ 
    /* This need to be wide. */ 
    min-width: 2000px; 
}

有了這個網站：

<div class="horizontal-scroll-pane"> 
<ul class="inline-list"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 2</a></li> 
    <li><a href="#">Link 3</a></li> 
    <li><a href="#">Link 4</a></li> 
    <li><a href="#">Link 5</a></li> 
    <li>...</li> 
</ul> 
</div>

這裏小提琴：http://jsfiddle.net/NicoO/RRd2L/

來源

2014-02-05 18:12:38

如何修改Zurb Foundation的內聯列表以將列表修復爲單行，從而允許溢出：滾動？

回答

相關問題