textareaをdivの幅いっぱいにするにはどうすればよいですか? _html/css

textareaをdivの幅いっぱいにするにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:35:55

オリジナル

2267 人が閲覧しました

<!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>

ログイン後にコピー

ディスカッションに返信 (解決策)

投稿者の意味がよくわかりませんか?

幅100%ではないですか？

rows="6" Cols="80"~を削除して、スタイルを通して幅を与えます

ブラウザで確認したほうがいいですその結果、最初はrows="6"cols="80"と書かれていなかったのですが、幅100%なのに実際の幅は800pxを超えてしまいました。 ? ?

はっきりと確認するには、firebug を使用してください。

ブラウザで効果を確認してください。rows="6"cols="80" は 100% の幅ですが、実際の幅は 800px を超えています。 ? ?

< /button>

3階さんの回答より引用:

ブラウザで効果を確認するのが一番良いです rows="6"cols="80"は元々100%幅ですが、実際の幅は800pxを超えています。なぜわからないのですか？ ? ?
＆lt; div id = "lyinput"＆gt;

もう Firefox をインストールしたくないのですが、Firebug を使用したことがありません。対処方法を説明していただけますか。ありがとう~~~~

一般的なスタイルを定義していないので、このコードを追加します
*{ margin:0;padding:0;}
そして、テキストエリアのデフォルトはルームメイトの境界線であり、これも幅を占めます、定義します

textarea{ border:none;}

問題は解決しました。とにかく、テストでは問題ありませんでした。

一般的なスタイルを定義していない場合は、次のコードを追加します

*{ margin:0;padding:0;}

そして、textarea のデフォルトはルームメイトの境界線であり、幅も占有します。
textarea{ border:none;} を定義します
質問それが解決策です。とにかく、私がテストしたものには問題ありません。

O(∩_∩)O 助けてくれてありがとう~~~、それは確かに境界線とマージンの問題です~~~