CSS:溢出的 block 元素一直没有样式

Question

我试图找到我的问题的答案，但找不到。也许我不知道怎么问。这是一个代码示例:

ul{
  background: rgba( 255, 0, 0, 0.1 );
}
li {
  width: auto;
  white-space: nowrap;
}
li.selected {
  background: #ccccff;
}

<ul>
  <li>
    LINE 1
    <ul>
      <li>
        LINE 1-1
        <ul>
        </ul>
      </li>
      <li>
        LINE 1-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li class="selected">
    LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2
    <ul></ul>
  </li>
  <li>
    LINE 3
    <ul>
      <li>
        LINE 3-1
        <ul>
        </ul>
      </li>
      <li class="selected">
        LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    LINE 4
    <ul></ul>
  </li>
  <li>
    LINE 5
    <ul></ul>
  </li>
</ul>

如何让背景色到达最长li元素的末尾？有窍门吗？如果我将 li 更改为 display: inline-block，那么颜色会到达末尾，但较短的 li 元素将在同一行。这是不可取的。

知道如何解决这个问题吗？

更新...

它正在运行，但我不知 Prop 体原因。

<ul>
    <li>
        <div>
            <span>Item ...</span>
        </div>
        <ul>
            [CHILD LI ELEMENTS ...]
        </ul>
    </li>
</ul>

或没有 div 元素的版本给了我想要的结果。元素的背景颜色一直设置到右边。

div#tree {
	position: fixed;
	top: 2em;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.5em;
	overflow: scroll;
}

ul{
	margin: 0;
	padding: 0;
}
ul ul {
	margin: 0 0 0 1em;
}

li {
	width: auto;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style: none;
}

span {
	display: inline-block;
	padding: 0.25em;
	background: #336633;
	border: 0;
}
li.selected > div > span {
	background: #333366;
}

<div id="tree">
	<ul>
		<li>
			<div>
				<span>Root</span>
      </div>
      <ul>
        <li>
          <div>
            <span>ITEM 1</span>
          </div>
          <ul>
            <li>
              <div>
                <span>ITEM 1-1</span>
              </div>
              <ul></ul>
            </li>
            <li>
              <div>
                <span>ITEM 1-2 | ITEM 1-2 | ITEM 1-2 | ITEM 1-2 | ITEM 1-2</span>
              </div>
              <ul>
              </ul>
            </li>
          </ul>
				</li>
        <li>
          <div>
            <span>ITEM 2</span>
				</div>
 			<ul></ul>
		</li>
	</ul>

抱歉给您带来了麻烦。谢谢。

Answer 1

实现此目的的最佳方法是在 css 下更新，

li {
    overflow-x: auto;
}
/* width */
li::-webkit-scrollbar {
    height:5px;
}
/* Track */
li::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
}
/* Handle */
li::-webkit-scrollbar-thumb {
    background: red; 
}

ul{
  background: rgba( 255, 0, 0, 0.1 );
}
li {
  width: auto;
  white-space: nowrap;
    overflow-x: auto;
}
/* width */
li::-webkit-scrollbar {
    height:5px;
}
/* Track */
li::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
}
/* Handle */
li::-webkit-scrollbar-thumb {
    background: red; 
}
li.selected {
  background: #ccccff;
}

<ul>
  <li>
    LINE 1
    <ul>
      <li>
        LINE 1-1
        <ul>
        </ul>
      </li>
      <li>
        LINE 1-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li class="selected">
    LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2 | LINE 2
    <ul></ul>
  </li>
  <li>
    LINE 3
    <ul>
      <li>
        LINE 3-1
        <ul>
        </ul>
      </li>
      <li class="selected">
        LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2 | LINE 3-2
        <ul>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    LINE 4
    <ul></ul>
  </li>
  <li>
    LINE 5
    <ul></ul>
  </li>
</ul>