代码之家 › 专栏 › 技术社区 › Mario Narcis Radoi

什么CSS将阻止这些嵌套列表项的重叠?

html-lists css html

Mario Narcis Radoi · 技术社区 · 15 年前

请将以下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

迪格朗特戈特的评价完全正确。但是,我需要一个纠正方法。这可能更容易与旧的IE浏览器使用的坏盒模型一起工作。

3 回复 | 直到 13 年前

DisgruntledGoat 15 年前

它们重叠是因为 <ul> 元素的宽度设置为300px,它还具有 left-padding 这样就形成了“阶梯式”的外观。所以第一个列表水平地从0到300px,而第二个嵌套列表水平地从20px到320px,依此类推。

我不完全确定你想要达到的效果(也许你可以发布一个模型?)但也许在最外面设置宽度 <UL & GT; 只有(即 #top 选择器)将执行您想要的操作。

Sam Hasler zpesk 15 年前

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

Mario Narcis Radoi 15 年前

我最终通过添加一个额外的容器来解决这个问题:

http://jsbin.com/itevo/2

多亏了萨姆·H.和那个不好意思的山羊,他们花时间提供了一些指导。:)