Question

我有一个带有10px填充的父.mainWrap，但我的宽度为100％的输入无法正确包裹？

它在右侧延伸，但它与左侧的填充物对齐。

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％+填充。

Answer 2

使用css

box-sizing:border-box;

可能会工作，但我认为它与IE 7不兼容。相反，由于您的输入显然试图占据其包装器的整个宽度，请考虑

display:block; width:auto;

Here's an article解释它。要点是“width：auto”将占据其父母宽度，同时包括自己的填充和边框。另一方面，“宽度：100％”只是确保元素内部宽度与其父级宽度相同，并且填充和边框是额外的。

宽度：自动仅适用于块级元素，如典型的“div”或“p”，因此只需使输入块级别元素并应用宽度：auto而不是100％应该可以做到这一点

宽度100％不会在父级内用填充包裹？

2 个答案: