个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 13:40:54 28 4
gpt4 key购买 nike

请将以下 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 浏览器使用的损坏的盒子模型一起工作。

最佳答案

它们重叠是因为每个 <ul>元素设置为 300px 宽度，它还有一个 left-padding这创造了“阶梯状”的外观。因此，第一个列表的水平范围为 0 到 300px，而第二个嵌套列表的水平范围为 20px 到 320px，依此类推。

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

关于html - 什么 CSS 可以防止这些嵌套列表项重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2210577/

28 4 0
文章推荐： javascript - CSS 一致性工具
文章推荐： php - Zend_Auth 检查用户是否登录
文章推荐： java - 如何截取网站的全屏截图
文章推荐： html - 如何阻止容器 div 允许内容溢出？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com