css - 为什么子输入字段比父 div 宽

Question

HTML

<div class="wrap">
    <input class="field" type="text">
    <textarea class="field" row="10"></textarea>
</div>

CSS

.wrap{width:300px;overflow:hidden;padding:10px;}
.field{display:block;width:100%;margin:10px 0;padding:10px;}

我希望文本输入的宽度和 textarea 应该完全等于父 div。但他们不是。谁能解释为什么？

score 16 · Accepted Answer

总宽度计算为padding+ width+的总和borderWidth。这是盒子模型的默认行为。您可以使用box-sizing属性来更改它。在你的情况下：

.field {
    ...
    box-sizing: border-box;
}

score 3 · Accepted Answer

这是因为您已经padding应用了.field删除填充并看到它会起作用。

.field{display:block;width:100%;margin:10px 0;}

或者

你有100%宽度设置所以只需设置宽度如下。

.field {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 280px;
}

score 0 · Accepted Answer

该width: 100%属性适用于内容框，而不是边框框。如果您使用的是 CSS3，您可以设置box-sizing: border-box以获得预期的大小。

score 0 · Accepted Answer

0

试试这个：

.wrap{width:300px;overflow:hidden;padding:10px 0px;}

于 2013-03-23T05:21:22.247 回答

4 回答 4