浮动到滚动区域的ul列表

Question

我想要一种方法让我的无序列表向右流动到一个可滚动区域，而不是在有多个时浮动到一个新行。我已经阅读了许多其他类似于互联网和堆栈溢出的东西，但没有做出我想要或正常工作的东西。怎么能实现呢？

还有办法让这个可滚动区域使用JQuery按钮吗？因此，当用户按下它时，它将跳转到下一个项目。

JSFiddle：JSFiddle Link

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; margin: 0; padding: 0; }
table { border-collapse: separate; border-spacing: 0; margin-bottom: 1.4em; }
caption, th, td { text-align: left; font-weight: 400; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes:  }
a img { border: none; }

.series_container { margin-bottom: 15px; padding: 10px; background-color: #FFFFFF; border: medium #F0F0F0 solid; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow-x: scroll; }
.series_table { width: 100%; font-size: 12px; }
.series_block { display: inline; text-align: center; width: 24.6%; margin: 0 .1em; color: #FFFFFF; float: left; list-style-type: none; transition: all 0.25s; position: relative; box-sizing: border-box; border-bottom: 1px solid transparent; }
.series_grayed { display: none; }
.series { display: table; background: #202020; width: 100%; height: 70px; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; }
.series_figure { font-size: 24px; vertical-align: middle; display: table-cell; }
.series_number { font-weight: bold; display: block; }
.series_tenure { font-size: 11px; }
.features { background: #F0F0F0; color: #333333; }
.features li { padding: 8px 7.5px; border-bottom: 1px solid #B6B6B6; font-size: 11px; list-style-type: none; height: 40px; }
.series_footer { background: #F0F0F0; padding-bottom: 10px; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; }
.series_block:hover { -webkit-box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); -webkit-transform: scale(1.03) translateY(-5px); -moz-transform: scale(1.03) translateY(-5px); -o-transform: scale(1.03) translateY(-5px); -ms-transform: scale(1.03) translateY(-5px); transform: scale(1.03) translateY(-5px); z-index: 1; border-bottom: 0 none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.series_block:hover .series { background: #004687; }

目前如何运作：

除了所有项目只是一个可滚动字段外，我希望它看起来如何：

Answer 1

正在进行什么

您可以使用white-space和inline-block使用纯CSS。我有90％的工作，但我有一个问题，某些盒子被推下来。这与每个项li中的最后li有关。

编辑：当最后一个框只有一行时，它会向下按下该框。奇怪，我不知道为什么。应该有办法解决它。

编辑2 看起来罪犯在inline-block li内的文字长度不同。要解决这个问题，我们需要控制额外的溢出文本。

我们可以将overflow: hidden设置为.feature li，这样可以防止任何溢出到三行。结合这一点，我会对文本内容保持谨慎，并确保它们的长度非常相似。

---

代码

Working Fiddle

原始CSS：

.series_table { width: 100%; font-size: 12px; }
.series_block { display: inline; text-align: center; width: 24.6%; margin: 0 .1em; color: #FFFFFF; float: left; list-style-type: none; transition: all 0.25s; position: relative; box-sizing: border-box; border-bottom: 1px solid transparent; }
...
.features li {padding: 8px 7.5px; border-bottom: 1px solid #B6B6B6; font-size: 11px; list-style-type: none; height: 40px; }

新CSS：

.series_table { width: 100%; font-size: 12px; white-space: nowrap;}
.series_block { display: inline-block; text-align: center; width: 200px; margin: 0 .1em; color: #FFFFFF; list-style-type: none; transition: all 0.25s; position: relative; box-sizing: border-box; border-bottom: 1px solid transparent; white-space: normal;}
...
.features li {overflow:hidden; padding: 8px 7.5px; border-bottom: 1px solid #B6B6B6; font-size: 11px; list-style-type: none; height: 40px; }

主要变化：

将white-space:nowrap添加到.series_table。

将display:inline-block和white-space:normal添加到.series_block，然后移除float。

将overflow:hidden添加到.features li。

---

截图

Answer 2

如果要使其滚动到溢出区域，则.series_table的宽度需要是根据其列表项计算的固定宽度。用纯CSS计算它是不可能的。在jquery的帮助下，我们可以计算出这个元素的宽度，这样我们就可以使它可以滚动。

我已经制作了width个.series_table个列表项{＆＃39} 200px，您可以根据需要进行更改。

Fiddle link.

$(function() {
    var $series_table = $('.series_table'),
        $series_table_item = $series_table.find('.series_block'),
        item_num = $series_table_item.length,
        table_width = item_num * $series_table_item.outerWidth(true);

    $series_table.css('width', table_width + 'px');
});