当前位置：首页 → 问答吧 → 如何设置文本框宽度为100%

如何设置文本框宽度为100%

时间：2011-07-20

来源：互联网

今天遇到一个问题，需要让文本框的宽度，占满整个浏览器，但是因为文本框设置了border和padding，当把input的width设置为100%时，input的宽度实际是浏览器的宽度，再加上border和padding的宽度，就超出了，请问这种情况该怎么处理？

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input100%</title> <style type="text/css"> .main { width: 300px; height: 200px; border: 1px solid #ccc; padding: 10px;} input { width: 100%; border: 2px solid #ccc; padding: 10px;} </style> </head> <body> <div class="main"> <input name="" type="text" /> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: hinono 发布时间: 2011-07-20

给它一个负margin?

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input100%</title> <style type="text/css"> .main { width: 300px; height: 200px; border: 1px solid #ccc; padding: 10px;} input { width: 100%; border: 2px solid #ccc; padding: 10px; margin-top:-12px; margin-left:-12px;} </style> </head> <body> <div class="main"> <input name="" type="text" /> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: veapon 发布时间: 2011-07-20

如何设置文本框宽度为100%

热门阅读

热门下载