vue一直自动换行问题解决

html换行主要是由于< div >标签引起的,而vue的一些前端组件本身就会自带< div >,比如el-input的标签拆分出来之后就形成了如下的内容

因此之前我采用

复制代码
<el-form-item prop="code" v-if="captchaOnOff">
    <el-input
      v-model="loginForm.code"
      auto-complete="off"
      placeholder="验证码"
      style="width: 63%">
    </el-input>
    <div class="login-code">
      <img :src="codeUrl" class="login-code-img"/>
    </div>
 </el-form-item>

这种采用比分比定义的方式会造成网页自动换行的问题出现,这里我采用elementui官网上提供的几种布局进行定义

,我的定义如下:

html 复制代码
<el-form-item>
    <el-col :span="11">
        <el-input class="code-item" v-model="loginForm.code" type="text" placeholder="验证码"></el-input>
    </el-col>

    <el-col :span="11">
        <el-image style="width:100px height:100px" :src="codeUrl" :fit="fit"></el-image>
    </el-col>
</el-form-item>

然后再定义内层文本框的大小

css 复制代码
.code-item :last-child{
    height: 20px;
    width: 157.5px;
    font-size: 15px;
}
//因为el-text本质上是div拼上普通的text标签,所以这里需要使用last-child取到最里面的标签

.code-item{
    padding: 25px 25px 5px 5px;
}

最终能够成功地进行换行了

相关推荐
患得患失9495 分钟前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
三年三月8 分钟前
021-顶点法线与反射原理
javascript·three.js
快起来别睡了17 分钟前
Vue 3 中的 Watch、WatchEffect 和 Computed:深入解析与案例分析
vue.js
快起来别睡了19 分钟前
React 是如何用 JSX 写页面,却能被浏览器执行的?——Babel 的魔法解析
前端
喧星Aries30 分钟前
进程调度的时机,切换与过程方式(操作系统OS)
java·服务器·前端·操作系统·进程调度
海底火旺32 分钟前
useState:批处理与函数式更新
前端·react.js·面试
一块plus32 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
亿万托福34 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户408128120038134 分钟前
JWT 和 token 区别
前端
yvvvy35 分钟前
🚀React + Vite 实战:打造智能单词学习应用
javascript