div内的textarea

时间:2012-05-25 08:46:32

标签: css html textarea

我认为我在这里做错了,我希望textarea在每一方都比父div小10px,但它不是那样,它太小了:

<html>
  <div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: absolute; left: 10px; top: 10px; bottom: 10px; right: 10px; border: 1px solid #FF0000; resize:none;"></textarea>
  </div>
</html>

jsfiddle:http://jsfiddle.net/2a7LR/1/

为什么会这样?我怎样才能做到这样它在父div的每一边都小10 px?

它只在chrome / safari中正确显示,但在其他所有浏览器中都出错(firefox,opera,IE8)

3 个答案:

答案 0 :(得分:10)

http://jsfiddle.net/2a7LR/5/为您调整了一些CSS。基本上使用width: 100%; height: 100%,将10px移动到容器的padding属性,然后将box-sizing添加到textarea以使大小考虑边框。

答案 1 :(得分:2)

<html>
<div style="position: absolute; left: 10px; top: 10px; width:50%; height: 50%; border: 1px solid #000000;">
    <textarea style="position: relative; margin: 10px 10px 10px 10px; width:90%; height: 90%"></textarea>
</div>
</html>​

这对你有用。文本区域可以在绝对div内相对。你只需要用边距定位它而不是顶部和左边。

干杯,联邦

编辑:还注意到你没有在文本区域设置任何宽度和高度,因此不知道它的大小 - 它只是放置默认值。

答案 2 :(得分:-2)

http://jsfiddle.net/EzJ8G/1/ 替换textarea中的样式并添加填充:10px;

相关问题