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;
}

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

相关推荐
CRMEB定制开发7 分钟前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
imber8 分钟前
Framer Motion & GSAP 实现酷炫动画
前端
刘政feng啊14 分钟前
[Vue2]从零实现一个 el-popover 气泡框组件
vue.js
ygming14 分钟前
Q43- code973- 最接近原点的 K 个点 + Q44- code347- 前 K 个高频元素
前端·算法
ygming16 分钟前
Hashmap/ Hashset- Q39~Q42内容
前端·算法
多啦C梦a16 分钟前
【前端必修】闭包、`this`、`箭头函数`、`bind`、节流,一篇文章全懂!
前端·javascript·html
归于尽16 分钟前
为什么别人用闭包那么溜?这 8 个场景照着用就对了
前端·javascript·面试
Hilaku18 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)24 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
在钱塘江40 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端