ホームページ >ウェブフロントエンド >htmlチュートリアル >textareaをdivの幅いっぱいにするにはどうすればよいですか? _html/css_WEB-ITnose
textareaをdivの幅いっぱいにするにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:35:552295ブラウズ
<!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%ではないですか？
c137b134c16d7c8e6a1f7f85fa50f4ea40587128eee8df8f03d0b607fe983014
rows="6" Cols="80"~を削除して、スタイルを通して幅を与えます
ブラウザで確認したほうがいいですその結果、最初はrows="6"cols="80"と書かれていなかったのですが、幅100%なのに実際の幅は800pxを超えてしまいました。 ? ?
はっきりと確認するには、firebug を使用してください。
ブラウザで効果を確認してください。rows="6"cols="80" は 100% の幅ですが、実際の幅は 800px を超えています。 ? ?
a580f1eca925e012d900130452962931
120d611986108da972f06c8ab0c8bab5
?
3階さんの回答より引用:
ブラウザで効果を確認するのが一番良いです rows="6"cols="80"は元々100%幅ですが、実際の幅は800pxを超えています。なぜわからないのですか？ ? ?
＆lt; div id = "lyinput"＆gt;
もう Firefox をインストールしたくないのですが、Firebug を使用したことがありません。対処方法を説明していただけますか。ありがとう~~~~
一般的なスタイルを定義していないので、このコードを追加します
*{ margin:0;padding:0;}
そして、テキストエリアのデフォルトはルームメイトの境界線であり、これも幅を占めます、定義します
問題は解決しました。とにかく、テストでは問題ありませんでした。
一般的なスタイルを定義していない場合は、次のコードを追加します
そして、textarea のデフォルトはルームメイトの境界線であり、幅も占有します。
textarea{ border:none;} を定義します
質問 それが解決策です。とにかく、私がテストしたものには問題ありません。
O(∩_∩)O 助けてくれてありがとう~~~、それは確かに境界線とマージンの問題です~~~