2014-07-07 34 views
0

這是我的HTML(CSS的是HTML的一部分):HTML/CSS - 在li中放置td可刪除li上的左邊界?

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      table td { 
       border: 1px solid black; 
      } 

      li { 
       margin-left: 30px; 
      } 

      .first { 
       width: 100% 
      } 
     </style> 
    </head> 

    <body> 
     <table> 
      <tr> 
       <td class='first'>text</td> 
       <td><img src='shipping3.png' width='30px' /></td> 
      </tr> 

      <ul> 
       <li> 
        <tr> 
         <td class='first'>text</td> 
         <td><img src='shipping3.png' width='30px' /></td> 
        </tr> 
       </li> 

       <ul> 
        <li> 
         <tr> 
          <td class='first'>text</td> 
          <td><img src='shipping3.png' width='30px' /></td> 
         </tr> 
        </li> 
       </ul> 

      </ul> 
     </table> 

    </body> 
</html> 

現在,即使我做了李有一個利潤率左,運輸署李的內線沒有向左移動。即使我在做

li td { 
    margin-left: 30px; 
} 

td不會向左移動。我如何讓李的裏面的td收到給每個李的餘裕?

+2

爲什麼在無序列表中嵌套錶行? – Steve

+1

這是無效的標記。造型問題將繼承和不一致。清理標記('ul'和'li'不能是'tr'的子節點)。 – aaronburrows

+0

@ user574632基本上我試圖創建一個論壇(PHP代碼被刪除)。每個帖子都由兩個td(第一個td有文本,第二個td有一個圖像)表示。第一篇文章沒有縮進。該帖子可以收到任何數量的回覆。每個回覆都可以收到任意數量的回覆。我可以想到動態縮進回覆的唯一方法是每次用戶回覆答覆時都添加一個新列表。所以回覆的答覆是列表中的一個列表(它會自動收到兩個縮進..你明白我的意思了嗎?) – user2719875

回答

0

從我的評論:

您有無效的標記。這種無效標記會導致未定義的行爲(基於客戶端瀏覽器如何決定嘗試呈現它)。請注意0​​的內容模型部分。您需要的是首先更正標記,然後找到縮進問題的解決方案。在這裏,我不太清楚這個解決方案是什麼。