zoukankan      html  css  js  c++  java
  • iview 一行显示2列,select多选横向滚动条,兼容下拉图标

    .ivu-form { display: flex; flex-wrap: wrap; .ivu-form-item { 50%; margin-bottom:14px; .ivu-form-item-error-tip{ color: #F56C6C; font-size: 12px; line-height: 1; padding-top: 4px; position: absolute; top: 100%; left: 0; padding-top: 2px; } .ivu-select-multiple{ .ivu-select-selection{ &>div{ display: flex; flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; position: absolute; line-height: normal; white-space: normal; top: 50%; transform: translateY(-50%); calc(100% - 20px); } // scrollbar ::-webkit-scrollbar { 4px; height: 4px; } ::-webkit-scrollbar-button { display: none } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--font-s-a-20); //滚动条颜色 border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--font-s-a-80); //滚动条颜色 } .ivu-select-arrow{ display: none; // 自带的图标未知有问题隐藏掉自己画一个 } &:before{ font-family: psi-design-fonts; position: absolute; top: 50%; right: 8px; line-height: 1; transform: translateY(-50%); font-size: 12px; color: var(--font-s); content:"f116"; } } .ivu-tag{ height: 20px; line-height: 18px; margin: 0 4px 0 0; min- 60px; } } } .ivu-form-item-100 { 100%; } }

  • 相关阅读:
    [LuoguP2161] 会场预约
    [LuoguP1198] 最大数
    [LuoguP1484] 种树
    [LuoguP1801] 黑匣子
    [LuoguP1196]银河英雄传说
    [LuoguP1345] 奶牛的电信Telecowmunication
    [LuoguP1119]灾后重建
    【笔记】一元函数微分学
    【复习】Listening and Reading Comprehension
    【笔记】一元函数的不定积分
  • 原文地址:https://www.cnblogs.com/m7777/p/15510562.html
Copyright © 2011-2022 走看看