2010-02-26 68 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