溢出-x:滚动时自动和行背景颜色可见性 [英] overflow-x: auto and line background color visibility on scroll

问题描述

我定义了以下HTML和CSS以在发生溢出时进行水平滚动，并同时为每行应用背景色:

I have the following HTML and CSS defined to have the horizontal scroll when I have overflow and at the same time, apply the background color for each line:

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>

但是，当我向右滚动时，我看不到每行应用的背景色:

However, I am not seeing background color for each line applied when I scroll to right:

我要做的是为应用了 .highlight CSS类的行应用背景色，并且背景必须是整行的(包括在执行过程中可见的隐藏部分)滚动).同时，我不想将滚动条应用于每一行(例如: http://jsfiddle.net/sLbgmq8s/9/).

What I am after is to apply the background color for the lines which has .highlight CSS class applied and the background needs to be for the the whole line (including the hidden part which gets visible during the scroll). At the same time, I don't want to apply the scroll bar to each line (like here: http://jsfiddle.net/sLbgmq8s/9/).

我在这里想念什么?这是jsfiddle: https://jsfiddle.net/sLbgmq8s/4/

What am I missing here? Here is the jsfiddle: https://jsfiddle.net/sLbgmq8s/4/

推荐答案

经过一番努力，我终于找到了正确的答案.感谢@mirek为带我朝正确的方向.

After struggling a bit, I finally figured out the correct answer. Big thanks to @mirek for heading me to the right direction.

首先，您需要将 ul 显示设置为 table ，将 li 显示设置为 table-row .然后，将两个宽度都设置为 100％.最后一点是将 ul 包装在 div 内，并使该div具有滚动行为.这在所有情况下都适用.这是jsfiddle的更新版本: https://jsfiddle.net/sLbgmq8s/22/

First of all, you need to set ul display as table and li display as table-row. Then, set both widths' to 100%. Final touch is to wrap ul inside a div and give that div the scroll behavior. This works well for all the cases. Here is the update version of the 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>

这篇关于溢出-x:滚动时自动和行背景颜色可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！