blocks|key|977264|text|box-sizing:+border-box是一种快速、简单的修复方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|977265|这个will+work+in+all+modern+browsers和IE8%2B。|977266|这是一个演示：http://jsfiddle.net/thirtydot/QkmSk/301/|977267|.content+{
++++width:+100%25;
++++box-sizing:+border-box;
}|code-block|syntax|javascript|977268|浏览器的前缀版本(-webkit-box-sizing等)在现代浏览器中是不需要的。|977269|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/CSS/box-sizing|1|http://caniuse.com/box-sizing|2|http://jsfiddle.net/thirtydot/QkmSk/301/^0|0|M|0|M|0|0|2|W|1|0|7|14|2|0|0|9|I|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|J|3|K|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]]]

<a href="https://developer.mozilla.org/en/CSS/box-sizing" rel="noreferrer"><code>box-sizing: border-box</code></a> is a quick, easy way to fix it:

This <a href="http://caniuse.com/box-sizing" rel="noreferrer">will work in all modern browsers</a>, and IE8+.

Here's a demo: <a href="http://jsfiddle.net/thirtydot/QkmSk/301/" rel="noreferrer">http://jsfiddle.net/thirtydot/QkmSk/301/</a>

<pre class="lang-css prettyprint-override"><code>.content {
 width: 100%;
 box-sizing: border-box;
}
</code></pre>

The browser prefixed versions (<code>-webkit-box-sizing</code>, etc.) are not needed in modern browsers.

blocks|key|977287|text|这就是我们在CSS中使用box-sizing的原因。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|977288|我已经编辑了你的例子，现在它可以在Safari，Chrome，Firefox和Opera中工作。查看一下：http://jsfiddle.net/mathias/Bupr3/我添加的所有内容是：|977289|input+{
++-webkit-box-sizing:+border-box;
+++++-moz-box-sizing:+border-box;
++++++++++box-sizing:+border-box;
}|code-block|syntax|javascript|977290|不幸的是，像IE7这样的老浏览器不支持这一点。如果您正在寻找在旧的IE中工作的解决方案，请查看其他答案。|977291|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/CSS/box-sizing|1|http://jsfiddle.net/mathias/Bupr3/^0|C|A|C|A|0|0|1H|Y|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

This is why we have <a href="https://developer.mozilla.org/en/CSS/box-sizing" rel="noreferrer"><code>box-sizing</code></a> in CSS.

I’ve edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: <a href="http://jsfiddle.net/mathias/Bupr3/" rel="noreferrer">http://jsfiddle.net/mathias/Bupr3/</a>
All I added was this:

<pre class="lang-css prettyprint-override"><code>input {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
</code></pre>

Unfortunately older browsers such as IE7 do not support this. If you’re looking for a solution that works in old IEs, check out the other answers.

blocks|key|761801|text|使用css+calc()|type|unstyled|depth|inlineStyleRanges|entityRanges|data|761802|超级简单和令人敬畏。|761803|input+{
++++width:+-moz-calc(100%25+-+15px);
++++width:+-webkit-calc(100%25+-+15px);
++++width:+calc(100%25+-+15px);
}​|code-block|syntax|javascript|761804|如下所示：Div+width+100%25+minus+fixed+amount+of+pixels|offset|length|761805|作者:+webvitaly+(https://stackoverflow.com/users/713523/webvitaly)|761806|原文来源：http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/|761807|我只是把它复制到这里，因为我几乎在另一个线程中错过了它。|761808|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels|1|https://stackoverflow.com/users/713523/webvitaly|2|http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/^0|0|0|0|5|17|0|0|F|1C|1|0|5|1R|2|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|17|8|@]|9|@$K|18|L|19|1|1A]]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@$K|1C|L|1D|1|1E]]|A|$]]|$1|O|3|P|5|6|7|1F|8|@]|9|@$K|1G|L|1H|1|1I]]|A|$]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]|12|$5|V|W|X|A|$Y|13]]]]

Use css calc()

Super simple and awesome.

<pre class="lang-css prettyprint-override"><code>input {
 width: -moz-calc(100% - 15px);
 width: -webkit-calc(100% - 15px);
 width: calc(100% - 15px);
}​
</code></pre>

As seen here: <a href="https://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels">Div width 100% minus fixed amount of pixels</a> 
By webvitaly (<a href="https://stackoverflow.com/users/713523/webvitaly">https://stackoverflow.com/users/713523/webvitaly</a>) 
Original source: <a href="http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/" rel="noreferrer">http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/</a> 

Just copied this over here, because I almost missed it in the other thread.

blocks|key|761770|text|假设我在一个有15px填充的容器中，这是我总是使用的内部部分：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|761771|width:auto;
right:15px;
left:15px;|code-block|syntax|javascript|761772|这将拉伸内部部分到任何宽度，它应该小于15px的两边。|761773|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Assuming i'm in a container with 15px padding, this is what i always use for the inner part:

<pre><code>width:auto;
right:15px;
left:15px;
</code></pre>

That will stretch the inner part to whatever width it should be less the 15px either side.

blocks|key|761673|text|你可以尝试一些定位技巧。你可以把输入放在一个带有position:+relative和固定高度的div中，然后在输入上有position:+absolute;+left:+0;+right:+0;，以及你喜欢的任何填充。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|761674|Live+example|761675|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/wW4mY/2/^0|O|I|1O|12|0|0|C|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You can try some positioning tricks. You can put the input in a div with <code>position: relative</code> and a fixed height, then on the input have <code>position: absolute; left: 0; right: 0;</code>, and any padding you like.

<h2><a href="http://jsfiddle.net/wW4mY/2/" rel="noreferrer">Live example</a></h2>

blocks|key|977253|text|将输入框的填充移动到包装器元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|977254|<style>
div.outer{+background:+red;+padding:+10px;+}
div.inner+{+border:+1px+solid+#888;+padding:+5px+10px;+background:+white;+}
input+{+width:+100%25;+border:+none+}
</style>

<div+class="outer">
++++<div+class="inner">
+++++++<input/>
++++</div>
</div>|code-block|syntax|javascript|977255|请参阅此处的示例：http://jsfiddle.net/L7wYD/1/|offset|length|977256|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/L7wYD/1/^0|0|0|9|S|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Move the input box' padding to a wrapper element.

<pre><code>&lt;style&gt;
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
&lt;/style&gt;

&lt;div class="outer"&gt;
 &lt;div class="inner"&gt;
 &lt;input/&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

See example here: <a href="http://jsfiddle.net/L7wYD/1/" rel="nofollow">http://jsfiddle.net/L7wYD/1/</a>

blocks|key|977499|text|只需理解width:auto；和width:100%25；Width:auto；将(AUTO)自动计算宽度，以便与包括填充在内的包装div的精确给定匹配。宽度100%25扩展宽度并添加填充。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|977500|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Just understand the difference between width:auto; and width:100%;
Width:auto; will (AUTO)MATICALLY calculate the width in order to fit the exact given with of the wrapping div including the padding.
Width 100% expands the width and adds the padding.

blocks|key|762260|text|自上次回答这个问题以来，浏览器可能已经发生了变化，但这是唯一能让我可靠地完成这个任务的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|762261|++++width:+auto;
++++left:+0;
++++right:+0;|code-block|syntax|javascript|762262|然后，您可以设置任何您想要的边距/填充，元素将不会扩展到超过其可用宽度。|762263|这类似于@andology在way+back中的回答，但是如果你将left/right都设为0，那么你可以使用margin和/或padding作为你想要的任何东西。因此，这始终是我的默认div。|offset|length|style|CODE|762264|entityMap^0|0|0|0|1J|6|1S|7|2L|3|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]|$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

Maybe browsers have changed since this question was last answered, but this is the only thing that has ever worked reliably for me to accomplish this:
<pre><code> width: auto;
 left: 0;
 right: 0;
</code></pre>
Then you can make the margins / padding anything you want and the element will not expand past its available width.
This is similar to @andology's answer from way back but if you make left/right both 0 then you can make <code>margin</code> and/or <code>padding</code> whatever you want. So this is always my default <code>div</code>.

blocks|key|761855|text|把它包装在一个容器里怎么样？容器应具有如下样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|761856|{
++++width:100%25;
++++border:+10px+solid+transparent;
}|code-block|syntax|javascript|761857|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

What about wrapping it in a container. Container shoud have style like:

<pre><code>{
 width:100%;
 border: 10px solid transparent;
}
</code></pre>

blocks|key|977442|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|977443|width:+100%25;
box-sizing:+border-box;|code-block|syntax|javascript|977444|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>width: 100%;
box-sizing: border-box;
</code></pre>

blocks|key|762152|text|对我来说，使用margin:15px;padding:10px+0+15px+23px;width:100%25，结果是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|762153|​|762154|📷|atomic|762155|762156|对我来说，解决方案是使用width:auto而不是width:100%25。我的新代码是：|762157|margin:15px;padding:10px+0+15px+23px;width:auto。然后元素正确对齐：|762158|762159|762160|762161|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/cae6463b26d240b955aae1a1ebc45d81.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/660057b71bdfd37fb2f1456bb8a43ea0.png^0|7|1B|0|0|0|1|0|0|0|C|A|P|A|0|0|1B|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|K|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|P|3|G|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Q|3|I|5|J|7|1L|8|@]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|R|3|G|5|6|7|1P|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z|10|-4]]|11|$5|V|W|X|E|$Y|12|10|-4]]]]

For me, using <code>margin:15px;padding:10px 0 15px 23px;width:100%</code>, the result was this:

<a href="https://i.stack.imgur.com/7RVie.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7RVie.png" alt="enter image description here"></a>

The solution for me was to use <code>width:auto</code> instead of <code>width:100%</code>. My new code was:

<code>margin:15px;padding:10px 0 15px 23px;width:auto</code>. Then the element aligned properly:

<a href="https://i.stack.imgur.com/9d6fW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9d6fW.png" alt="enter image description here"></a>

blocks|key|977298|text|您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|977299|width:+auto;
padding:+20px;|code-block|syntax|javascript|977300|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can do this:

<pre><code>width: auto;
padding: 20px;
</code></pre>

I have an html input.

The input has <code>padding: 5px 10px;</code> I want it to be 100% of the parent div's width(which is fluid).

However using <code>width: 100%;</code> causes the input to be <code>100% + 20px</code> how can I get around this?

<a href="http://jsfiddle.net/7FNgt/" rel="noreferrer">Example</a>

How to make an element width: 100% minus padding?

容器

我有一个html输入。输入有padding: 5px 10px;，我希望它是父div宽度的100% (这是流体)。但是，使用width: 100%;会导致输入为100% + 20px，我该如何解决这个问题？

问如何使元素宽度: 100%减去填充？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使元素宽度: 100%减去填充？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使元素宽度: 100%减去填充？
EN