左邊緣移位表擴展到父div以外

我在div中放置了一個表並將表寬設置爲100％。我在div的表格左邊放置了一個圖標，因此我使用了margin-left屬性來移動表格並使用position:absolute和top和left屬性來放置圖標。這一切都工作得很好，但是表格寬度被移出父div之外 - 顯然是因爲left-margin設置。因爲我需要表根據瀏覽器窗口的寬度動態擴展，所以我不能只設置一個固定大小來將表保存在div內。最終，我可以將所有的div內容封裝在一個表格中，並以這種方式佈局元素，但是我希望通過調整CSS來更好，更簡單的解決方案。謝謝！左邊緣移位表擴展到父div以外

我想要實現：

|-margin-| 
+--------------------------------------------------------------------+ 
| (div) +---------------------------------------------------------+| 
|   | (table)             || 
|   |               || 
|   +---------------------------------------------------------+| 
+--------------------------------------------------------------------+

什麼我越來越：

|-margin-| 
+--------------------------------------------------------------------+ 
| (div) +----------------------------------------------------------|-------+ 
|   | (table)             |  | 
|   |               |  | 
|   +----------------------------------------------------------|-------+ 
+--------------------------------------------------------------------+

更新：
感謝所有的建議。當我打出一個更長時間的迴應時，我的回答就明白了。我認爲width:100%意思是「填充但仍然在父元素的邊界內」，而不是「假定父元素的指定寬度」。由於表上設置的margin-left:80px屬性造成了所有的麻煩，我只是將其設置爲padding-left:80px並解決了問題。

@Ace - 我真的不是「要求人們爲我做所有的工作」。自從我描述了我所做的事情之後，我認爲非常簡單的CSS並不是必需的，但我認爲它可能有幫助。所以這裏，與工作的最後CSS一起：

原始CSS：

.mydiv { 
position:relative; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
margin-left:80px; 
}

最後CSS：

.mydiv { 
position:relative; 
padding-left:80px; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
}

來源

2012-03-13 randall

代碼？不要求人們做所有的單詞4你^^ – Ace 2012-03-13 22:01:56

由於左邊距**和**你告訴它與div的寬度相同，所以它不在div中。它沒有選擇。 – Phrogz 2012-03-13 22:16:20

p.s. （如果有答案，則標記爲答案） – Ace 2012-03-15 11:55:07

刪除表的margin-left:80px並添加padding-left:80px到div容器：

.mydiv { 
position:relative; 
padding-left:80px; 
border:1px solid #000000; 
} 
.myicon { 
position:absolute; 
left:20; 
top:15; 
} 
.mytable { 
border:1px solid #000000; //so I can see it 
table-layout:auto; 
width:100%; 
}

來源

2012-03-17 06:04:29 randall

如果使圖標CSS背景圖像在包裝DIV，所有你需要的是在桌子上留下一些餘量，一切都會好的。

來源

2012-03-13 22:04:18

或絕對定位圖像而不是表格。 – Phrogz 2012-03-13 22:15:33

你不需要絕對定位任何東西。 – 2012-03-13 22:18:51

正確：TIMTOWTDI。 – Phrogz 2012-03-13 22:22:27

試試這個：

#tableID{ 
    left:100px; // the margin left 
    right:10px; 
}

它適用於div但對錶沒有嘗試

來源

2012-03-13 22:04:47 Ace

所以，你對圖標也一樣。 – Ace 2012-03-13 22:06:10

左邊緣移位表擴展到父div以外

回答

相關問題