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

【问题标题】：What CSS will prevent overlap of these nested list items?什么 CSS 可以防止这些嵌套列表项的重叠？
【发布时间】：2012-06-02 03:13:43
【问题描述】：

请以webpage 的形式查看以下 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>

编辑：

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

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

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

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

DigruntedGoat 的评估完全正确。但是，我需要一种纠正方法。这可能更容易与旧 IE 浏览器使用的损坏的盒子模型一起工作。

【问题讨论】：

标签： html css html-lists

【解决方案1】：

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

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

【讨论】：

你绝对是在正确的轨道上。我正在寻找替代 CSS 来解决此问题。
你试过我发布的内容了吗？即#top { width: 300px } 并删除通用ul 选择器上的width 规则。

【解决方案2】：

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

【讨论】：

谢谢。这很接近，但想法是完成的结果仍然在设置的容器宽度内水平滚动。

【解决方案3】：

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

http://jsbin.com/itevo/2

感谢 Sam H. 和 DisgruntedGoat 抽出时间提供一些指导。 :)

【讨论】：