ul список, который плавает в области прокрутки

0

Я хочу, чтобы сделать мой неупорядоченный поток списка справа в область, зависящую от прокрутки, вместо того, чтобы плавать в новую строку, когда ее много. Я прочитал много других вещей, которые похожи на Internet и на переполнение стека, но ничего не сделало то, что я хотел или работал должным образом. Как это можно сделать?

Также был бы способ сделать эту область с прокруткой работать с помощью кнопки JQuery? Поэтому, когда пользователь нажимает на него, он перейдет к следующему элементу.

JSFiddle: ссылка JSFiddle

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

В настоящее время как это работает:

Изображение 174551

Как я хочу, чтобы это выглядело, за исключением всех элементов, это просто поле для прокрутки:

Изображение 174551

  • 0
    Вам нужен один ряд элементов li , а ul прокручивается вбок, верно? Это нормально, если они имеют фиксированную ширину вместо 24%, как сейчас?
  • 0
    Да, вот что я ищу. Фиксированная ширина хороша, потому что я могу с ней работать. Я не продан на текущей ширине в любом случае. Просто то, что я настроил, чтобы оно идеально вписалось в пространство, которое у меня было
Показать ещё 1 комментарий
Теги:
css-float

2 ответа

2
Лучший ответ

Что происходит

Вы можете сделать это с помощью чистого CSS, используя white-space и inline-block. Я работаю на 90%, но у меня проблема с некоторыми ящиками. Это как-то связано с последним li внутри каждого элемента li.

EDIT: Когда в последнем окне есть только одна строка, он сдвигает окно. Странно, и я не знаю, почему. Однако должен быть способ исправить ситуацию.

РЕДАКТИРОВАТЬ 2 Похоже, что нарушитель имеет разную длину текста внутри inline-block li s. Чтобы исправить это, нам нужно управлять дополнительным переполняющим текстом.

Мы можем установить overflow: hidden к .feature li s, которое предотвратит переполнение на три строки. В сочетании с этим я буду осторожен с текстовым контентом и убедитесь, что все это довольно похоже на длину.

Код

Рабочий скрипт

Оригинальный 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 ing.

Добавить overflow:hidden в .features li.

Скриншот

Изображение 174551

Поделиться
  • 0
    Спасибо за помощь. У меня было несколько проблем, когда я пытался заставить это работать, пока я не понял, что у меня были очистки после каждых 4 строк кода. Как только те ушли, это работало безупречно.
  • 0
    Ах, извините, я должен был упомянуть, что я удалил их в моем примере. Рад, что ты получил это работает!
1

Если вы хотите, чтобы он прокручивался до переполненной области, ширина .series_table необходима для фиксированной ширины, рассчитанной в соответствии с ее элементами списка. Вычисление этого с помощью чистого CSS невозможно. С небольшой помощью jquery мы можем рассчитать ширину этого элемента, и таким образом мы можем сделать его прокручиваемым.

Я сделал width .series_table списка .series_table ' 200px, вы можете изменить его, как хотите.

Ссылка на скрипт.

$(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');
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню