【CSS】input宽度根据内容自适应

作者：System 时间：2024年08月15日分类：所有,css 字数：415

这篇文章距离上次修改已过454天，其中的内容可能已经有所变动。

在CSS中，要使input元素的宽度根据其内容自适应，可以使用width属性设置为auto。此外，还需要确保input元素的display属性不是inline，否则width: auto可能不会生效。

以下是实现这一功能的CSS代码示例：




input {
  display: block; /* 或者 inline-block */
  width: auto; /* 宽度自适应内容 */
  box-sizing: border-box; /* 可选，确保padding和border不会影响实际宽度 */
}

这段代码确保了input元素在显示模式为block或inline-block时，其宽度会根据内容的宽度进行自适应调整。如果input元素默认就是block级别的，则可以省略display属性。