自适应表格中input框输入文字布局被打乱

最新推荐文章于 2024-05-19 11:27:40 发布
最新推荐文章于 2024-05-19 11:27:40 发布
阅读量201 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy_demo/article/details/131568176
版权

我今天在写一个新增用户表单的时候，发现我只要输入文字，input框的高度就会改变，导致布局被打乱

这是正常排列好的样式：

 这是我输入中文后的样子：

后来我发现输入中文后，input的高度被撑开了，我一开始没有给盒子设置固定的高度以及行高，设置完高度，并且行高等于高之后就解决了这个问题

 需要给下面这个盒子，设置行高以及高度，并且行高等于高度即可

 

yy_demo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Qt开发经验总结
草上爬的博客
12-02 7344
增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废弃了，必须用Qt5中对应的新的函数。跟随时代脚步，增加了不少新特性以满足日益增长的客户需求。对某些模块和类型及处理进行了革命性的重写，运行效率提高不少。有参数类型的变化，比如 long * 到 qintptr * 等，更加适应后续的拓展以及同时对32 64位不同系统的兼容。
Vue实现input宽度随文字长度自适应操作
10-15
主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-input 输入时显示换行，显示空格
newbaby123的博客
01-14 3804
<div class="lookText" v-if="!isAdd">{{formData.nexPlan}}</div> <el-input class="input_width" v-model="formData.nexPlan" placeholder="下周计划" type="textarea" :rows="2"> </el-input> <..
input输入框在table中的自适应记录笔记
qq_41131274的博客
06-02 1294
input输入框在table中的自适应记录笔记 例如： <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
使用ant design vue中a-table实现自定义列拖拽 以及解决列拖拽时表格大小跟着变化的问题
defined_的博客
06-01 2206
@resizeColumn="handleResizeColumn" 设置列拖拽方法 handleResizeColumn是拖拽时调用的函数 当isHidden为true时 为div加上table_hidden的样式 即超出部分隐藏 这样拖拽时跟着移动的表格部分就会被隐藏了
Vue之 el-input文本框拿到大量数据时自动换行显示
初心不改
07-28 5182
vue文本框
el-input输入时换行，显示时换行（开发小记）
热门推荐
Master_Tang的博客
05-16 1万+
开发商问题反馈： 输入框界面代码： <el-form-item> <span slot="label">回复内容:</span> <el-input v-model="backForm.replyMessage" type="textarea" placeholder="请输入回复"> </el-input> </el-form-item> .......
layout布局input框输入中文出现撑开/换行
会思想的苇草i的博客
04-20 1301
在使用 el-col 布局时，输入中文时出现撑开或换行，可能是因为中文字符的宽度与英文字符不同，导致布局出现问题。此时需要更灵活的布局方式，可以使用flexbox或grid布局来实现。
CSS3自适应浏览器页面框架布局代码
06-11
CSS3自适应浏览器页面框架布局代码是一款非常简单的网站后台界面布局效果，代码也非常少。
Pyqt5自适应布局实例
01-20
在pyqt5中要做到自适应布局，必须应用Layout类 下面列出类似于 html 中 float 功能的布局方法： 实现原理： PyQt5中的布局中，stretch 属性类似于一个可自适应的空白布局。会尽可能将周围的组件布局向外挤压 from ...
Vue 自适应高度表格的实现方法
10-15
主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
自适应Table表格样式代码
06-24
自适应Table表格样式代码是一款div css3响应式表格特效。
input 切换内容缓存错乱问题
weixin_43617604的博客
09-27 368
input 切换内容缓存问题 1 如果不想让input框显示缓存内容 可以在i耨他标签添加一个属性 autocomplete="off" 2 如果需要缓存 并且不想让每个input框内容错乱 可以添加key ="" key值先等内容可以错乱不等 就显示当前input之前的记录 ...
＜input＞ 输入的内容颠倒了 ，‘123’变成‘321’了
2301_78100622的博客
11-03 209
当点击输入框弹出键盘的，页面的高度并不是全屏的高度，需要除去键盘的高度。当手机是一个小屏幕的时候，页面的高度可能小于11.62rem，因此表单max-height小于0。既：点击输入框的时候，弹出的输入键盘把input这个模块挤压没加载出来，当输入完成后收起键盘，表单才加载，导致数据颠倒了。设置表单的高度通过获取全屏幕的高度去处理，不要用100vh，可以这样设置。例如：输入“123456”，显示的是“654321”
在el-table中用input框时一个变化所有的都会变化
m0_68937827的博客
12-13 1247
在el-table中用input框时一个变化所有的都会变化
form表单内input的基本介绍
yunduan__的博客
11-01 2449
表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。 例如 <form align="center"> 用户名： <div><input type="text" placeholder=请输入用户名> </div> 密码 :<div><input type="password" placeholder="请输入密码"> </div> 确认密码 ：<div
前端基础入门三大核心之HTML篇：无序列表的深度探索
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 792
在HTML中，无序列表是一种用于展示一系列条目，且这些条目的顺序无关紧要的列表结构。它通过（unordered list）标签来定义，而每个具体的条目则由（list item）标签包裹。为了美化列表，可以使用CSS来定制样式。例如，改变列表项的符号：/* 可以是disc, circle, square等 */ } < ul > < li > 项目一 < li > 项目二 < li > 项目三 ul。
前端基础入门三大核心之HTML篇：解密标签、标题与段落的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 1038
标题标签从到，分别代表六个不同的层级，最为重要，则较为次要。合理使用标题不仅有助于内容结构化，也有助于SEO。
input框如何自适应长度
05-31
可以使用CSS中的`width`属性来让input框自适应长度。通常情况下，可以将`width`设置为100%或者使用`flex`布局来实现。例如，可以使用以下样式： ```css input { width: 100%; box-sizing: border-box; padding: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值