无法使用CSS设置textarea宽度 [英] Unable to set textarea width with CSS

问题描述

我尝试使用这个CSS来设置表单元素的宽度：

I have attempted to use this CSS to set the width of my form elements:

input[type="text"], textarea { width:250px; }

如果你看看这个Firefox截图，你会看到字段宽度不一样。我在Safari中得到了类似的效果。

If you look at this Firefox screenshot you'll see that the fields are not the same width. I get a similar effect in Safari.

有没有解决方法？

更新：感谢您的信息。我现在确保padding / margin / border两个元素设置相同。我还是有问题。我发布的原始CSS简化...我也设置textarea的高度为200px。当我删除高度造型时，宽度匹配。奇怪的。

UPDATE: Thanks for the info so far. I've now made sure padding/margin/border on both elements are set the same. I was still having the problem. The original CSS I posted was simplified... I was also setting the height of the textarea to 200px. When I remove the height styling, the widths match. Weird. That makes no sense.

浏览器错误

推荐答案

填充和边框。或尝试对两个元素使用相同的元素

Try removing padding and borders. Or try making them the same for both elements

input[type="text"],
textarea {
    width:250px;
    padding: 3px;
    border: none;
    }

或：

input[type="text"],
textarea {
    width:250px;
    padding: 0;
    border: 1px solid #ccc;
    }

INPUT和TEXTAREA元素经常有一些由浏览器应用的填充），这可以使得显示的内容比分配的宽度更宽。

INPUT and TEXTAREA elements often have some padding applied by the browser (varies by browser) and this can make things appear effectively wider than the assigned width.

更新： box-sizing：border-box; 是一个方便的方式来设置宽度，填充和边框将吃，而不是添加。请参阅： http://www.paulirish.com/2012/box -sizing-border-box-ftw /

UPDATE: also box-sizing: border-box; is a handy way to set widths that that padding and border will eat into rather than add onto. See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

这篇关于无法使用CSS设置textarea宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！