Question

当我为输入字段设置填充大小时，它会自动更改大小。它变大了。

.container{
    width: 150px;
}

.item label{    
    display: block;
    width: 100%;
    margin-bottom: 10px;    
}

.from-item{
    width: 100%;
}

input[type="text"]{ 
    width: 100%;    
    padding: 5px;   
}

JSFfiddle

Answer 1

你应该考虑将它放在你的CSS中：

 * { box-sizing: border-box }

这改变了盒子模型，使得填充不会增加元素在屏幕上占据的大小。在我看来，和许多其他人的想法一样，这是一个更好的模型：

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

盒子型号的一般信息：http://css-tricks.com/the-css-box-model/

Answer 2

您可以使用box-sizing:border-box来解决您的问题，但它是一个css3属性。因此与旧浏览器不兼容。

实现这一目标的另一种方法是在输入和放大器周围放置一个包装器div。给它填充。

<div class="ibox"><input type="text" class="from-item"></div>

.ibox{
    padding: 5px;   
}

input[type="text"]{ 
    width: 100%;    
}

以下是演示链接http://jsfiddle.net/aq8mP/1/

如何从100％宽度减去填充宽度？

2 个答案: