input宽度自适应的问题

最新推荐文章于 2025-05-23 16:46:36 发布

weixin_33701617

最新推荐文章于 2025-05-23 16:46:36 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript ViewUI

原文链接：https://segmentfault.com/a/1190000006960964

本文探讨了网页设计中input元素宽度设置导致的显示问题，并提供了多种解决方案，包括调整padding、使用百分比宽度及移除边框等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多地方看到过这样的问题，就是关于input宽度设置的问题。

如图，图中黑色框就是设置了100%后，input输入框的展现，很是蛋疼。
图片描述

<style type="text/css">
    .box{width:300px;height:200px;background-color:tan;padding-top:50px;}
    .box div{height:30px;background-color:green;padding-top:5px;}
    .box div input{width:100%;padding:0 5px;}
</style>
<div class="box pdr20">
    <div>
        <input type="text" name="" />
    </div>
</div>

针对与上述问题：

这是我的几种方法，你试试，想用哪种用哪种，好处：简单，不需要任何 script 代码

 
问题出在了input的边框问题 ,默认有border-style: inset边框2象素
在包含input的div中 可以加上面代码padding-right减去边框就行
如果不需要太长的input，可以设置input宽度为99%
也可以不加任何代码，但需要把input 边框去掉 如：border: none;
去掉边框后，在input的外面套一个div元素，或者你觉得合适的元素 ，把div元素设置上边框，可以实现你要的效果。

可以移步到blog：sundexin.com 查看更多文章