子元素繼承寬度問題

-2

所以我有這個奇怪的問題，我有一個容器中的元素，它繼承了conatiner的寬度。子元素繼承寬度問題

嘗試和解決這個問題我只是設置CSS寬度屬性爲任何我想要的。當我在瀏覽器中預覽時，它已經適當地調整了寬度，但現在它已經擴展了右邊距來填充容器。

我試圖通過做一些事情來抵消這個問題，比如margin-right：0;或使用負值，但沒有任何工作

來源

2012-12-11 skevthedev

你可以發佈你的代碼嗎？ – Samsquanch

沒有你的代碼就無法幫你。 –

需要查看代碼。沒有看到代碼的初始猜測就是它也從它的父代繼承邊界/填充/邊界，並將它們添加到你指定的寬度。 –

孩子的寬度永遠不會從父母（父母指定的確切值）繼承！但是，是依賴於父寬度。如果您在父級上指定寬度並具有塊級子級，則它將始終擴展到父級寬度的100％。這是完全正常的行爲。

如果您在子元素上設置了明確的寬度，您必須注意，它是填充和邊框未計入總寬度（使用標準框模型）。你有兩個選擇：

帳戶填充
改變箱莫代爾

的CSS：但是

#parent{ 
    width:100px; 
} 
#child{ 
    padding:10px; 
    width:100px; /* child will be 20px too wide */ 
} 
/*method 1*/ 
#child{ 
    padding:10px; 
    width:80px; /* child will fit perfectly: 80px +10px + 10px */ 
} 
/* method 2*/ 
#child{ 
    padding:10px; 
    width:100px; 
    box-sizing:border-box;  /* child will fit perfectly 
           width now includes content and padding */ 
    -moz-box-sizing:border-box; /* for compatibility*/ 
    -webkit-box-sizing:border-box; 
}

注，即box-sizing是一個較新的CSS屬性和不是每個瀏覽器都可以處理它。

來源

2012-12-11 16:38:33 Christoph

您的答案沒有解決正在調整瀏覽器窗口的問題！ – Reado

@Reado Box大小與瀏覽器窗口的寬度（響應式設計）完全無關。這是兩個完全分開的話題，也不是問題的一部分。這個答案是爲了澄清由於不直觀的盒子尺寸模型造成的配件不合適的問題，以及如何解決這個問題而不是創建響應式設計。如果您有關於響應式設計的問題，只需提出一個不同的問題，如果您認爲答案缺乏信息，請改進（編輯）它，但請不要因爲一開始就不是問題的一部分的原因而使其失效。 – Christoph

子元素繼承寬度問題

回答

相關問題