input宽度自适应的问题

xushaojieaaa 发布于2019-08-29 11:19 / 1061人阅读

摘要：在很多地方看到过这样的问题，就是关于宽度设置的问题。如图，图中黑色框就是设置了后，输入框的展现，很是蛋疼。可以移步到查看更多文章

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

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

针对与上述问题：

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

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

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

混合云云服务器 html的宽度自适应自适应宽度宽度自适应自适应宽度按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111565.html

<input> 宽度自适应变化

摘要：要实现上述的效果输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要实现上述的效果：输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度...

wangbjun 2019-08-02 16:17 评论0 收藏0
<input> 宽度自适应变化

摘要：要实现上述的效果输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度，它就会有一个默认的不变的宽度，想让它动态伸展是不可能。 showImg(https://segmentfault.com/img/bVbso8j?w=276&h=62); 要实现上述的效果：输入框的宽度随着输入的文字长度变化。而这个标签有自己的想法，如果没有给它设置一个固定的宽度...

levy9527 2019-08-30 10:50 评论0 收藏0
总结开发过程踩到的坑（二）

摘要：本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外滑稽。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的...

codeKK 2019-08-05 12:51 评论0 收藏0
总结开发过程踩到的坑（二）

摘要：本文章旨在总结开发过程中碰到的容易忘记或者比较重要的坑，一方面加深自己对于该部分的理解，另一方面希望能够分享给大家，知识在于分享，当然踩过的坑也不例外滑稽。在日常工作中，时常会碰到各种各样的坑，有时真的觉得很多时候开发的经验都是踩坑踩出来的。在通往大牛的道路上，希望自己能够跨越重重阻碍，越走越远。学会时常总结，不断提升自己。本文章旨在总结开发过程中碰到的容易忘记或者比较重要的...

laznrbfe 2019-08-22 14:06 评论0 收藏0
前端小姿势

摘要：文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完或者非最佳实践仅供参考父子组件的参考官方文档点我父级不需要操作额外代码子代操作方法一这个的官方会有介绍子代操作方法二通过这个实现的看了不少文章，这种比较多以为例子先简单介绍文章包含学习中遇到的问题小白水平可能会包含一些错误或者还没写完... 或者非最佳实践仅供参考 1.父子组件的v-model 参考vue官方文档...

JeOam 2019-08-02 16:11 评论0 收藏0