Question

请将以下HTML / CSS视为webpage。它显示围绕各种元素的边框轮廓。包含列表有意允许在固定宽度内进行水平滚动。问题是，当您滚动到轮廓的最右侧时，您可以看到内部元素的边框（所有热色）彼此重叠。期望的效果是它们与包含元件完全齐平（在右侧），从而不会发生重叠。什么是最简单的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>

编辑：

下图显示了示例大纲。请注意，宽度是固定的，并且可以向右滚动，以防用户键入的标题长于可在可视区域中显示的标题。请注意，突出显示的项目及其子项用浅灰色包裹。右侧有一些橙色标记用于调试目的。

http://drop.io/dfhejyj/asset/outline-png

下图显示相同的轮廓向右滚动。滚动是有意的，不能消除。问题是，当我向右滚动时，标题突出显示在包含UL标签之外（以浅灰色显示）。同样，橙色标记。期望的效果是橙色标记和灰色区域将始终在选择区域的右侧（由滚动条分隔）再次刷新，并且滚动条将始终保留（只要任何标题足够长）生产它。）

http://drop.io/dfhejyj/asset/outline-scrolled-to-right-png

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

Answer 1

li, span {
    overflow: hidden;
}

demo

但这更好：

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

demo

Answer 2

它们重叠，因为每个<ul>元素设置为300px宽度，并且它还有一个left-padding，可以创建“阶梯式”外观。所以第一个列表水平从0到300px，而第二个嵌套列表从20px到320px，依此类推。

我不完全确定你想要实现的效果（也许你可以发布一个模型？）但是可能只设置最外面<ul>的宽度（即#top选择器）会做你想做的事。

Answer 3

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

http://jsbin.com/itevo/2

感谢Sam H.和DisgruntedGoat，他们花时间提供了一些指导。：）

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

3 个答案: