亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue一直自動(dòng)換行的問(wèn)題及解決

 更新時(shí)間：2024年03月08日 14:12:27   作者：唐僧愛(ài)吃唐僧肉  
這篇文章主要介紹了vue一直自動(dòng)換行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue一直自動(dòng)換行的問(wèn)題

html換行主要是由于< div >標(biāo)簽引起的，而vue的一些前端組件本身就會(huì)自帶< div >

比如el-input的標(biāo)簽拆分出來(lái)之后就形成了如下的內(nèi)容

el-input標(biāo)簽拆分之后

因此之前我采用

<el-form-item prop="code" v-if="captchaOnOff">
    <el-input
      v-model="loginForm.code"
      auto-complete="off"
      placeholder="驗(yàn)證碼"
      style="width: 63%">
    </el-input>
    <div class="login-code">
      <img :src="codeUrl" class="login-code-img"/>
    </div>
 </el-form-item>

這種采用比分比定義的方式會(huì)造成網(wǎng)頁(yè)自動(dòng)換行的問(wèn)題出現(xiàn)

這里我采用elementui官網(wǎng)上提供的幾種布局進(jìn)行定義

我的定義

如下：

<el-form-item>
    <el-col :span="11">
        <el-input class="code-item" v-model="loginForm.code" type="text" placeholder="驗(yàn)證碼"></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>

然后再定義內(nèi)層文本框的大小

.code-item :last-child{
    height: 20px;
    width: 157.5px;
    font-size: 15px;
}
//因?yàn)閑l-text本質(zhì)上是div拼上普通的text標(biāo)簽，所以這里需要使用last-child取到最里面的標(biāo)簽

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

最終能夠成功地進(jìn)行換行了~

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論