如何修改Zurb Foundation内联列表以将列表修复为单行，允许溢出：滚动？

Question

我正在使用Foundation's documentation所描述的内联列表来显示图像列表。

这样可以正常工作，但如果图像列表超出了包含元素的宽度，我希望它们保留在一行中并且可以滚动溢出：overflow: scroll。

li（包含我的图片中的图像）和它们默认的display：block样式似乎存在问题。

如何更改我的列表：

。 。 。到一行中的项目列表，我可以水平滚动查看从页面溢出的图像？

Answer 1

我找到了

的解决方案

• 将父元素的样式设置为overflow:scroll;

• 将ul元素的样式设置为display: inline-flex

• 然后给li s最小宽度，在我的情况下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

我不确定这是否是最优雅的解决方案，但它可以完成我想要做的事情。

Answer 2

inline-list不适合您的用例。 inline-list为所有项目添加float:left并让它们成为。{1}}。这通常是你需要的。但是当到达父项的末尾时，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;
}

然后将类“real-inline”添加到所需列表中。有点hacky但它​​的确有效...你确定找到了一个更好的名字。

- 以前的解决方案（有效，但不是很好）： 我建议你添加一个像这样的新类：

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

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

有这个html：

<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/