ul list that floats into scroll area

Question

Im wanting a way to make my un-ordered list flow to the right into a scroll-able area instead of floating to a new line when there are to many. I have read many other things that are similar on the Internets and on stack-overflow but nothing made what I was wanting or worked properly. How can this be accomplished?.

Also would there be a way to make this scroll-able area work with a JQuery button? So when a user presses it it will jump over to the next item.

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; }

Currently How it Works:

How I'm wanting it to look except all items are just a scroll-able field:

Answer 1

What's Going On

You can do with with pure CSS, using white-space and inline-block. I've got is 90% working, but I'm having an issue with certain boxes being pushed down. It's something to do with the last li inside each item li.

EDIT: When the final box only has a single line, it pushes the box down. Odd, and I'm not sure why. There should be a way to fix it though.

EDIT 2 Looks like the offender is different lengths of text inside the inline-block lis. To fix this, we need to control the extra overflowing text.

We can set overflow: hidden to the .feature lis, which will prevent any from overflowing onto three lines. Combined with this, I'd be careful with the text content and make sure it's all pretty similar length.

---

Code

Working Fiddle

Original 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; }

New 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; }

Key Changes:

Add white-space:nowrap to .series_table.

Add display:inline-block, and white-space:normal to .series_block, and remove the floating.

Add overflow:hidden to .features li.

---

Screenshot

Answer 2

If you want to make it scroll to the overflowed area, the width of .series_table is needed to be a fixed width calculated according to its list items. Calculating this with pure CSS is not possible. With a little help of jquery we can calculate the width of this element and this way we can make it scrollable.

I've made the width of .series_table's list items' 200px, you can change it as you want.

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');
});