2

当我向宽度为 100% 的 HTML 添加边距时<textarea>，边距会正确应用到左侧，但整个文本框会向右移动并扩展父容器。

以这个JsFiddle为例。如您所见，textarea 超出了右侧，而不是扩展到 10px 边距。有没有什么办法解决这一问题？我能想到的唯一方法是使用javascript手动调整大小，但必须有另一种方法。

4

3 回答 3

0

您不能在不使用父元素 100% 宽度的元素上使用 100% 宽度。
在这种情况下，您需要创建一个 100% 的最大宽度，然后尝试获取一个与您应用的边距完全对应的宽度值。

于 2013-05-02T08:36:24.447 回答
0

当您设置width:100%时，它被设置为 100% 到父级，但是当您添加额外的 10px 边距时，它现在完全大于父级。

我已经开始在任何固定边距或宽度上使用百分比，因此不会发生这种情况。

因此，假设没有应用填充或边框等其他内容，请尝试类似width:99%; margin:10px 0.5%;不会溢出父元素的方法。

这是一个更新为使用百分比边距和宽度以不溢出的小提琴。

编辑

我确实想在元素具有 100% 宽度时添加任何边框或填充也会使其溢出。一个例子是 Firefox 中 textarea 的默认样式，它给它一个 2px 的插入边框 + 宽度 + 边距。

于 2013-05-02T08:36:33.183 回答
0

这是你想要的效果吗？在这里，我将位置设置为绝对位置并给出每个边缘的边距。

HTML

<textarea>tyjyjyj</textarea>

CSS

textarea {    
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
}

实际上：http: //jsfiddle.net/tTnCd/3/

为了更好地定位文本区域，您可以使用相对样式的元素将其包装起来，例如http://jsfiddle.net/tTnCd/4/

于 2013-05-02T09:01:49.597 回答