如何让textarea占满div的宽度？_html/css_WEB-ITnose-HTML Tutorial-php.cn

如何让textarea占满div的宽度？_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:35:55

Original

2269 people have browsed it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Ajax留言板</title>    <style type="text/css">    #bk    {        width:800px;        border:1px solid red;        margin:0 auto;    }    #lyInput    {        width:100%;    }    #txtLy    {        width:100%; /* 为什么textarea的宽度要宽于bk的宽度，如何让它正好占满bk的宽度？？？ */        height:100px;    }    #lyList    {        height:200px;        border:1px solid blue;        margin:10px 0 0 0;    }    #btnLy    {        display:block;    }    </style></head><body><div id="bk">    <div id="lyInput">        <textarea id="txtLy" rows="6" cols="80"></textarea>        <button id="btnLy">留言啦~~~</button>    </div>    <div id="lyList">            </div></div></body></html>

Copy after login

回复讨论(解决方案)

不太明白楼主的意思？

不就是 width 100%吗？

把 rows="6" cols="80"删掉~·然后通过样式给宽度

大家最好在浏览器中看看效果，rows="6" cols="80"本来就没写，虽是100%宽度，但实际占的宽度超出了800px，不知道为什么？？？

用firebug看一下就一目了然了。

大家最好在浏览器中看看效果，rows="6" cols="80"本来就没写，虽是100%宽度，但实际占的宽度超出了800px，不知道为什么？？？

红色部分那是什么？

引用 3 楼的回复:

大家最好在浏览器中看看效果，rows="6" cols="80"本来就没写，虽是100%宽度，但实际占的宽度超出了800px，不知道为什么？？？

抬杠啊，我是说去掉也没用的，你试试看吧~~~

用firebug看一下就一目了然了。

不想再安装firefox了，也没用过firebug，能说明一下如何处理吗？谢谢啦哈~~~~

你没有定义通用样式，你加上这段代码
*{ margin:0; padding:0;}
并且textarea默认室友边框的，它也占据宽度，定义
textarea{ border:none;}
问题就解决了，楼主可以试下，反正我测试的是没有问题的。

你没有定义通用样式，你加上这段代码
*{ margin:0; padding:0;}
并且textarea默认室友边框的，它也占据宽度，定义
textarea{ border:none;}
问题就解决了，楼主可以试下，反正我测试的是没有问题的。

O(∩_∩)O谢谢帮助~~~，确是 border 及 margin 的问题~~~