css - 嵌套列表 div 重叠 css

Question

我有一个列表，里面有 div..
现在，当我使用嵌套列表时，我看到它们与父 li 中的 div 以及下面的 li 重叠

结构是...html 已损坏(抱歉，但 Markdown html 有严重缺陷...)

<ol id="update" class="timeline">


<li class="bar245">
        <div align="left">
        <span >aaaa</span>
        <span class="delete_button"><a href="#" id="245" class="delete_update">X</a></span>
        <div class="clear"></div>
        </div>

        <ol class="comment">
            <li>
                    <div class="clear"></div>
                    <div>Testing </div>
            </li>
            <li>
                    <div class="clear"></div>
                    <div>Another Test </div>

            </li>
        </ol>
    </li>
</ol>

CSS 是...

ol.timeline
    {list-style:none;font-size:1.2em;}

        ol.timeline ol {
            list-style:none;
            margin: 0;
            padding: 0;
            position: absolute;
        }
       ol.timeline li {
        display:none; position:relative;
        padding:10px 0px 20px 10px;
        line-height:1.1em; background-color:#D3E7F5; height:55px; width:489px;

        border-bottom-style: solid;
        border-bottom-width: 10px;
        border-bottom-color: #ffffff;
    }

.clear {
                clear:both;
                height:1px;
                overflow:hidden;
              }

我尝试使用清晰的 div 但无济于事......

这是一个例子......

http://pradyut.dyndns.org/WebApplicationSecurity/newcomment.jsp

任何帮助

谢谢
普拉育

Answer 1

我认为问题在于 div 没有重叠，您只是看到了这种效果。它看起来那样的原因是你在 <li> 上设置了背景颜色元素，其中包含彼此。如果您删除它并添加您的背景来表示子 div，如下所示:

li div { background-color: #D3E7F5; }

应该更容易看到你的布局发生了什么，试试吧，我很确定这就是你想要的。