2010-02-26 70 views
0

我有在它里面的div列表...
现在,当我使用嵌套表我看到他们与父里的div与李的重叠以及嵌套列表的div重叠CSS

下方

的结构是...的HTML坏了(抱歉,但降价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; 
       } 

我试图用一个明确的股利,但无济于事...

下面就是一个例子....

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

任何帮助

感谢
Pradyut

+0

你使用的是什么position:absolute for? – Skay 2010-02-26 12:57:52

+0

对不起,但现在我删除了它的链接...仍然没有运气... – 2010-02-26 13:15:43

回答

0

李S和嵌套里也应该被用作容器,并应具有包含在其内部一个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

Regards
Pradyut

0

我认为问题是divs不重叠,你只是看到了这种效果。这样看起来的原因是您在<li>元素上设置了背景色,这些元素包含另一个元素。如果删除,并添加你的背景说孩子的div,像这样:

​​

它要容易得多,看看发生了什么事情与你的布局,尝试它,我敢肯定这是你在做什么后。

+0

没有它们重叠...看看 http://pradyut.dyndns.org/WebApplicationSecurity/newcomment.jsp – 2010-02-26 12:53:24