Question

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

结构是...... 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

任何帮助

感谢
Pradyut

Answer 1

我认为问题是div不重叠，你只是看到了这种效果。它看起来那样的原因是你在<li>元素上设置了背景颜色，它们彼此包含。如果你删除它并添加你的背景来说出子div，就像这样：

li div { background-color: #D3E7F5; }

应该更容易看到你的布局发生了什么，尝试一下我很确定你所追求的是什么。

Answer 2

li s和嵌套的li应该用作容器，并且应该包含div ...

具有类似

的结构

       <ol>
        <li class="bar248">
        <div class="nli">
        <div class="pic">
            <img src="dir/anonymous-thumb.png"alt="image" />
        </div>
        <div align="left" class="text">
        <span>
                <span class="delete_button"><a href="#" id="test" class="delete_update">R</a></span>

                test shouted <span class="timestamp"> 2010/02/24 18:34:26 </span> <br />
        this
        </span>
        </div>

        <div class="clear"></div>
        </div>
        <div class="padd">

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

        </ol>

    </li>

  </ol>

看看this

关心
Pradyut

嵌套列表divs重叠css

2 个答案: