寬度100％不填充父項中的填充？

我有一個家長，.mainWrap與10px填充，但我的寬度100％的輸入不能正確包裝？寬度100％不填充父項中的填充？

它伸展在右側，但它與左側的填充很好地對齊。

input[type="text"], input[type="password"] { 
    width: 100%; 
    padding: 8px 10px; 
    border: 1px solid #DDD; 
    display: block; 
    margin-bottom: 8px; 
    overflow: hidden; 
    margin: 0 auto 8px auto; 
}

來源

2015-04-30 Jamie Anderson

您需要添加：

input, label, button, div{ 
    box-sizing:border-box; 
}

這是因爲，在默認情況下，該box-sizing是content-box。這意味着元素寬度實際上是100％+填充。

來源

2015-04-30 08:26:40

使用CSS

box-sizing:border-box;

可能會奏效，但它是不兼容的，我認爲，IE 7和向下。相反，因爲你的投入顯然是試圖佔領它們的包裝的整個寬度，考慮

display:block; width:auto;

Here's an article解釋它。要點是「width：auto」將佔用其父寬度，同時包含自己的填充和邊框。另一方面，「寬度：100％」只是確保元素內部寬度與其父元素的寬度相同，並且填充和邊框是額外的。

寬度：自動只能在塊級元素，如一個典型的「格」或「p」，因此簡單地使輸入塊級元素和施加寬度：汽車，而不是100％應該做的伎倆

來源

2015-04-30 08:32:53 NachoDawg

寬度100％不填充父項中的填充？

回答

相關問題