width: 100%

I have an html input.

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

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

Example

---

Read the other answers here, or read this answer: Content of div is longer then div itself when width is set to 100%?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

If you need this to work in IE7, you can read an old revision of this answer.

---

This is why we have box-sizing in CSS.

I've edited your example, and now it works in Safari, Chrome, Firefox, and Opera. Check it out: http://jsfiddle.net/mathias/Bupr3/ All I added was this:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

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.

---

也使用百分比填充并从宽度中删除：

padding: 5%;
width: 90%;

链接地址: http://www.djcxy.com/p/88400.html

上一篇: 什么是布局？

下一篇: 宽度：100％