页面上input输入框宽度实现自动调整

要实现input输入框的宽度自动调整，可以使用CSS的width属性设置为100%，以使其宽度与父元素的宽度相匹配。另外，可以使用min-width和max-width属性来设置输入框的最小和最大宽度以防止过度伸缩或缩小。

HTML:




<input type="text" class="auto-width-input" />

CSS:




.auto-width-input {
  width: 100%; /* 宽度与父元素相同 */
  min-width: 150px; /* 最小宽度 */
  max-width: 500px; /* 最大宽度 */
  box-sizing: border-box; /* 宽度包含border和padding */
}

这段代码将确保输入框的宽度会根据父元素的宽度自动调整，同时限制最小和最大宽度以保持布局的可读性和易用性。

页面上input输入框宽度实现自动调整

评论已关闭

推荐阅读