width：100％-padding？ [英] width: 100%-padding?

问题描述

我有一个html输入。

I have an html input.

输入有 padding：5px 10px;

但是使用 width：100％; 会导致输入 100％+ 20px 如何解决这个问题？

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

示例

推荐答案

请阅读这里的其他答案，或阅读此答案： 当宽度设置为100％时，div的内容长于div本身？

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 是一个
快速，简单的方法

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

此将适用于所有现代的
浏览器

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

这里是一个演示： http：// jsfiddle.net/thirtydot/QkmSk/301/

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

_{在IE7中工作，您可以阅读此回答的旧版本。}

这篇关于width：100％-padding？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！