在html中，可以通过给input标签加一个div标签，固定div的宽度，设置input标签的宽度为100%，便可实现input宽度的自适应。下面小编举例讲解如何让input宽度自适应。
工具/原料
1
html+css
2
代码编辑器：Zend Studio 8.0.0
方法/步骤
1
新建一个html文件，命名为test.html，用于讲解如何让input宽度自适应。
2
在test.html文件内，使用div标签创建一个模块，并设置其id为mydiv，主要用于下面通过该id设置div的样式。
3
在test.html文件内，在div标签内，使用input标签创建一个输入框，并设置其id为inp。
4
在test.html文件内，使用标记css样式代码，页面样式将在此处编写。
5
在css标签中，使用css设置div的宽度，设置其宽度为400px，高度为100px，背景颜色为灰色，内边距为30px。
6
在css标签中，再使用css设置input的样式 ，定义input的宽度为100%，即根据div的大小自适应。
7
在浏览器中打开test.html页面，查看实现的效果。
总结：
2、在文件内，使用div标签创建一个模块，在div标签内，使用input标签创建一个输入框。 3、在css标签中，使用css设置div的宽度，设置其宽度为400px，高度为100px，背景颜色为灰色，内边距为30px。 4、在css标签中，再使用css设置input的样式 ，定义input的宽度为100%，即根据div的大小自适应。
注意事项
若想全屏自适应，可以设置div的宽度为100%。
上一篇：装修风格攻略
下一篇：怎样画简笔画拿手电筒的人？