2011-04-26 99 views
11

大多數人都知道,css - 100%+填充?

一個100%div與5px填充實際上是100%+ 10px寬。這個

一個顯而易見的解決方案是wrap the child div in a wrapper that has a 10px margin 但是這種方法需要你添加額外的標記,我正在尋找一種方式來做到100%+填充沒有額外股利。

有什麼想法?

+0

如果你使用'padding-left'和'padding-top'和'padding-bottom'?這是你想要的結果?或者你可以看看http://stackoverflow.com/questions/5219175/width-100-padding – jotapdiez 2011-04-26 03:15:29

回答

19

<div>這樣的塊元素在填充後自動假定100%寬度。即你應該能夠簡單地通過指定一個填充來實現預期的效果,在auto上保留寬度並確保該元素具有display: block(默認爲<div>)。

http://jsfiddle.net/EMYBm/8/

+0

好吧,好吧,我的部分不好的例子,讓我們假設它不是一個div,而是它是一個html輸入... – Hailwood 2011-04-26 03:40:58

+0

@Hailwood這是一個非常重要的細節。 :-P在這種情況下,你別無選擇,只能使用包裝(如果你關心IE)。 – deceze 2011-04-26 05:04:57

+0

是啊...我的壞:D – Hailwood 2011-04-26 20:26:19

10

你應該看看box-sizing CSS屬性...

我放在一起的例子向你展示它是如何工作和具有box-sizing屬性和沒有它之間的區別。退房的小提琴......

http://jsfiddle.net/UnsungHero97/bKsad/2/

注意,這將不會在IE7或以下工作:/

我希望這有助於。
Hristo

+0

但是,這將工作在IE7? – Hailwood 2011-04-26 03:41:52

+0

不...哈哈,這不會在IE 7或以下工作 – Hristo 2011-04-26 03:44:42

+0

得愛m $:/ – Hailwood 2011-04-26 04:39:19