Html 什么样的CSS可以防止这些嵌套列表项的重叠？_Html_Css_Html Lists

Html 什么样的CSS可以防止这些嵌套列表项的重叠？

html css

Html 什么样的CSS可以防止这些嵌套列表项的重叠？,html,css,html-lists,Html,Css,Html Lists,请将以下HTML/CSS作为一个页面查看。它显示一个轮廓，在各个元素周围有边框。包含列表有意允许在固定宽度内水平滚动。问题是，当您滚动到轮廓的最右侧时，您可以看到内部元素的所有热色的边框都相互重叠。理想的效果是，它们在右侧与包含元素完全齐平，因此不会发生重叠。实现这一点最简单的CSS是什么 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta

请将以下HTML/CSS作为一个页面查看。它显示一个轮廓，在各个元素周围有边框。包含列表有意允许在固定宽度内水平滚动。问题是，当您滚动到轮廓的最右侧时，您可以看到内部元素的所有热色的边框都相互重叠。理想的效果是，它们在右侧与包含元素完全齐平，因此不会发生重叠。实现这一点最简单的CSS是什么

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Problem</title>
<style type="text/css">
ul {
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    width: 300px !important;
    border: solid 1px orange;
    height: auto;
    overflow: visible;
}
li, span {
    padding: 0;
    margin: 0;
}
#top {
    border: solid 1px black;
}
#top > li {
    overflow-x: auto;
    overflow-y: hidden;
    border: solid 1px yellow;
    margin-left: -20px;
}
li {
    display: block;
    border: solid 1px red;
}
li, ul, span {
    width: auto;
    white-space: nowrap !important;
}
</style>
</head>
<body>

<ul id='top'>
    <li id='trunk'>
        <span>This is the trunk</span>
        <ul>
            <li><span>This is the first line item</span>
             <ul>
              <li><span>This is the first subitem</span><ul></ul></li>
              <li><span>This is the second subitem</span><ul></ul></li>
              <li><span>This is the third subitem</span><ul></ul></li>
             </ul>
            </li>
            <li><span>This is the second line item</span><ul></ul></li>
            <li><span>This is the third line item</span><ul></ul></li>
        </ul>
    </li>
</ul>

</body>
</html>

编辑：

下图显示了一个示例轮廓。请注意，宽度是固定的，如果用户键入的标题长度超过可查看区域中显示的长度，则可以向右滚动。请注意，高亮显示的项目及其子项以浅灰色包裹。右侧有一些橙色标记，用于调试

下图显示了向右滚动的相同轮廓。滚动是有意的，不得消除。问题是，当我向右滚动时，标题突出在包含UL标签的外部，显示为浅灰色。同样，带有橙色标记。理想的效果是，橙色标记和灰色区域将始终与滚动条分隔的选择区域的右侧齐平，并且只要任何标题足够长，滚动条将始终保持不变

DigruntedGoat的评估完全正确。然而，我需要一种纠正方法。对于旧IE浏览器使用的破盒模型，这可能更容易实现

li, span {
    overflow: hidden;
}

但这更好：

#top {
    width: 300px !important;
}
ul {
    padding: 0 0 0 20px !important;
    margin: 0 !important;
    border: solid 1px orange;
    height: auto;
    overflow: visible;
}

它们重叠，因为每个元素的宽度都设置为300px，并且它还有一个左填充，创建阶梯状外观。因此，第一个列表在水平方向上从0到300px，而第二个嵌套列表从20px到320px，依此类推

我不完全确定你想要达到的效果也许你可以发布一个模型？但是，也许只在最外层设置宽度，即顶部选择器可以满足您的需要。

我终于能够通过添加一个额外的容器来解决这个问题：

多亏了萨姆·H.和心怀不满的人，他们花时间提供了一些指导

谢谢。这很接近，但其思想是，完成的结果仍然在设置的容器宽度内水平滚动。您肯定在正确的轨道上。我正在寻找替代CSS来解决这个问题。你试过我发布的内容吗？i、 e.top{width:300px}并删除通用ul选择器上的宽度规则。