場(chǎng)景
當(dāng)我們的頁(yè)面想要手動(dòng)設(shè)置 element ui 中 el-select 的高度時(shí),如果只是通過設(shè)置 el-select 的 height 屬性時(shí),會(huì)發(fā)現(xiàn)調(diào)整無(wú)效。
繼續(xù)對(duì) el-select 中的 input 元素 .el-input__inner 設(shè)置。會(huì)發(fā)現(xiàn)高度生效了,但是右側(cè)的下拉框箭頭移位了。
代碼
如下提供一種可以調(diào)整 el-select 高度的方法:文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-609226.html
.el-select {
width: 184px;
height: 32px;
.el-input__inner {
height: 32px;
}
.el-input__prefix, .el-input__suffix {
height: 32px;
}
/* 下面設(shè)置右側(cè)按鈕居中 */
.el-input__suffix {
top: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
}
/* 輸入框加上上下邊是 32px + 2px =34px */
.el-input__icon {
line-height: 34px;
}
}
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-609226.html
到了這里,關(guān)于element ui - el-select 手動(dòng)設(shè)置高度的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!