CSS:溢出的块元素不是所有的样式
CSS:溢出的块元素不是所有的样式
提问于 2018-11-27 12:09:42
我试着找出我的问题的答案，但我找不到。也许我不知道该怎么问。下面是一个代码示例：
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元素将在同一行上。这是不可取的。
你知道怎么解决这个问题吗？
已更新...
它是有效的，但我不知道具体原因。
<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>
很抱歉给您添了这么多麻烦。谢谢。
回答 3
Stack Overflow用户
发布于 2018-11-27 13:21:14
实现这一点的一个最好的方法是在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>
Stack Overflow用户
发布于 2018-11-27 12:32:15
您可以使用
li,
li ul{
background:rgba( 255, 0, 0, 0.1 );
}Stack Overflow用户
发布于 2018-11-27 13:11:55
ul{
background: rgba( 255, 0, 0, 0.1 );
display:inline-block;
}
ul ul{
display: block;
}
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>
或,
如果所有UL都需要相同的样式，请使用下面的样式。
ul{
display: table;
width: 100%;
box-sizing: border-box;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53492615
复制相关文章
相似问题
腾讯云开发者
