overflow-x：滚动

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

您可以尝试将 display：table-row 添加到您的css ul.list li

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

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

Answer 2

解决方案是将LI元素更改为

display: inline-block;

Demonstration

Answer 3

经过一番挣扎，我终于找到了正确的答案。非常感谢@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 4

问题是您没有定位包含文字的span元素

.highlight > span{...}

FIDDLE