在html中，可以通过给input标签加一个div标签，固定div的宽度，设置input标签的宽度为100%，便可实现input宽度的自适应。下面小编举例讲解如何让input宽度自适应。工具/原料morehtml+css代码编辑器：Zend Studio 8.0.0方法/步骤1/7分步阅读

新建一个html文件，命名为test.html，用于讲解如何让input宽度自适应。

2/7

在test.html文件内，使用div标签创建一个模块，并设置其id为mydiv，主要用于下面通过该id设置div的样式。

3/7

在test.html文件内，在div标签内，使用input标签创建一个输入框，并设置其id为inp。

4/7

在test.html文件内，使用style type=text/css/style标记css样式代码，页面样式将在此处编写。

5/7

在css标签中，使用css设置div的宽度，设置其宽度为400px，高度为100px，背景颜色为灰色，内边距为30px。

6/7

在css标签中，再使用css设置input的样式 ，定义input的宽度为100%，即根据div的大小自适应。

7/7

在浏览器中打开test.html页面，查看实现的效果。

总结：1/1

2、在文件内，使用div标签创建一个模块，在div标签内，使用input标签创建一个输入框。3、在css标签中，使用css设置div的宽度，设置其宽度为400px，高度为100px，背景颜色为灰色，内边距为30px。4、在css标签中，再使用css设置input的样式 ，定义input的宽度为100%，即根据div的大小自适应。

注意事项

若想全屏自适应，可以设置div的宽度为100%。

CSS