переполнение-х: авто и линия фон видимость цвета на свитке

Question

У меня есть следующий HTML и CSS определены иметь горизонтальную прокрутку, когда у меня есть переполнение и в то же время, применить цвет фона для каждой строки:

CSS:

ul.list { 
    list-style-type: none; 
    margin-top: 10px; 
    padding: 0; 
    text-align: left; 
    overflow-x: auto; 
} 

ul.list li { 
    margin: 0; 
    padding: 0 10px; 
} 

.highlight { 
    background-color: red; 
} 
.content-holder { 
     font-family: Consolas,"Liberation Mono",Menlo,Courier,monospace; 
    font-size: 12px; 
    color: #333; 
    white-space: pre; 
    overflow: visible; 
    -ms-word-wrap: normal; 
    word-wrap: normal; 
} 

HTML:

<ul class="list"> 
    <li> 
     <span class="content-holder">foo</span></li> 
    <li> 
     <span class="content-holder">foo foo foo foo foo foo</span></li> 
    <li class="highlight"> 
     <span class="content-holder">bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar</span> 
    </li> 
</ul> 

Однако, я не вижу цвет фона для каждой строки применяется, когда я прокручиваю направо:

То, что я после того, как это применить цвет фона для строки, которая имеет .highlight CSS класса применяется и фон должен быть для всей линии (в том числе скрытой части, которая получает видна во время прокрутки) , В то же время я не хочу применять полосу прокрутки к каждой строке (например, здесь: http://jsfiddle.net/sLbgmq8s/9/).

Что мне здесь не хватает? Вот jsfiddle: https://jsfiddle.net/sLbgmq8s/4/

Answer 1

После борьбы немного, я наконец понял, правильный ответ. Большое спасибо @mirek за heading me to the right direction.

Прежде всего, вам необходимо установить ul дисплей в качестве table и li дисплея в качестве table-row. Затем установите обе ширины '100%. Конечным касанием является обернуть ul внутри div и дать этому div поведение прокрутки. Это хорошо работает для всех случаев. Вот версия обновление jsfiddle: https://jsfiddle.net/sLbgmq8s/22/

CSS:

div.wrapper { 
    overflow-x: auto; 
} 

ul.list { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    text-align: left; 
    display: table; 
    width: 100%; 
} 
.highlight { 
    background-color: red; 
} 
ul.list li { 
    margin: 0; 
    padding: 0; 
    display: table-row; 
    width: 100%; 
} 
.content-holder { 
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 
    font-size: 12px; 
    color: #333; 
    white-space: pre; 
    overflow: visible; 
    -ms-word-wrap: normal; 
    word-wrap: normal; 
} 

HTML:

<div class="wrapper"> 
    <ul class="list"> 
     <li> <span class="content-holder">foo</span> 
     </li> 
     <li> <span class="content-holder">foo foo foo foo foo foo</span> 
     </li> 
     <li class="highlight"> <span class="content-holder">bar bar bar bar bar bar bar barbar bar bar bar bar barbar bar bar bar bar barbar bar bar bar bar bar</span> 
     </li> 
    </ul> 
</div> 

Answer 2

Решение было бы изменить LI элементов в

display: inline-block; 

Demonstration

Answer 3

проблема вы не нацеливание калибровочного элемента, содержащего текст

.highlight > span{...} 

FIDDLE

Answer 4

Вы можете попробовать добавить дисплей: настольный строку к вашему CSS ul.list литий

ul.list li { 
    margin: 0; 
    padding: 0 10px; 
    display: table-row; 
} 

https://jsfiddle.net/sLbgmq8s/13/