html - 宽度 100% 不会用填充包裹在父级内？

Question

我有一个父级 .mainWrap 具有 10px 的填充，但我的宽度为 100% 的输入没有正确换行？

它在右侧拉伸(stretch)，但与左侧的内边距对齐良好。

FIDDLE

input[type="text"], input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #DDD;
    display: block;
    margin-bottom: 8px;
    overflow: hidden;
    margin: 0 auto 8px auto;
}

Answer 1

你需要添加:

input, label, button, div{
    box-sizing:border-box;
}

这是因为，默认情况下，box-sizing 是 content-box。这意味着元素宽度实际上是 100% + 内边距。