Проблема с границами CSS и переполнением

У меня проблема с переполнением и отображением границы.

У меня есть содержимое в неупорядоченном списке, для которого я установил значение overflow: scroll;. Проблема в том, что когда я устанавливаю границу для неупорядоченного списка, граница не распространяется на элементы, которые переполняются.

Я хотел бы, чтобы граница для #times и #channel-rows ul расширялась и покрывала элементы, находящиеся за пределами границы. К Л М Н О П не в границе. Содержимое в строке B также не закрыто рамкой. Как мне поместить эти элементы в ту же границу, что и элементы перед ним?

Может ли кто-нибудь привести пример того, как сделать границу расширенной в область переполнения?

Пожалуйста, смотрите JSFiddle.

JSFiddle.


html css border overflow
person Glitchezz    schedule 15.05.2014    source источник
comment
Вы можете опубликовать немного HTML, CSS, jsfiddle.net?   -  person SW4    schedule 15.05.2014
comment
Ваш ulcontainer тоже установил переполнение?   -  person faby    schedule 15.05.2014
comment
Я предполагаю, это решит вашу проблему? jsfiddle.net/webtiki/LzHWM   -  person web-tiki    schedule 15.05.2014
comment
См. JSFiddle в исходном сообщении @SW4.   -  person Glitchezz    schedule 15.05.2014
comment
@faby, пожалуйста, посмотрите пример. Мне нужно несколько неупорядоченных списков для прокрутки вместе. - Спасибо   -  person Glitchezz    schedule 15.05.2014
comment
@Glitchezz, какая граница делает код неработающим?   -  person faby    schedule 15.05.2014

Ответы (2)


arrow_upward
4
arrow_downward

1) Добавьте обертку к прокручиваемому содержимому с помощью display:table

2) Установите ширину: 100% для детей #times и #channel-rows.

Наслаждаться!

ОБНОВЛЕНО FIDDLE

person Danield    schedule 15.05.2014
comment
Это довольно умно, таблицы должны быть окрашены иначе, чем элементы блочного уровня. - person Marc Audet; 15.05.2014
comment
ПРИМЕЧАНИЕ не работает с IE 11 или может иметь нежелательные последствия при использовании. Я переключился на display:inline-block;, и он работал так, как я хотел, но это заставило меня начать. - person interesting-name-here; 15.05.2017

arrow_upward
0
arrow_downward

удалите фиксированную ширину из #times и #channel-rows, и это решит вашу проблему. Если хочешь, я обновлю твою скрипку.

#times {
    float:right;
    padding: 10px 10px;
    width: 738px /*<-- THIS IS THE PROBLEM*/;
    border: 2px solid grey;
}

#channel-rows {
    background: none repeat scroll 0 0 #00FFFB;
    float:right;
    height: auto;
    width: 738px/*<-- THIS IS THE PROBLEM*/;;
}
person faby    schedule 15.05.2014
comment
Я попробовал это. Это не работает. Граница по-прежнему не распространяется на область прокрутки. - person Glitchezz; 15.05.2014
comment
Может быть, я не понимаю, какая граница неправильная. Если вы скажете мне, что это такое, я удалю его, чтобы показать, как должно быть. - person faby; 15.05.2014
comment
нет «неправильной границы». Я хотел бы, чтобы граница для #times и #channel-rows ul расширялась и покрывала элементы, находящиеся за пределами границы. К Л М Н О П не в границе. Также не весь контент в строке B. Как мне поместить их в ту же границу, что и элементы перед ним? - person Glitchezz; 15.05.2014
comment
проблема в #channel-rows и #times width исправлена. Дайте им большую ширину - person faby; 15.05.2014