Antdesign下拉选择框多选一行展示不换行

效果图:

Antdesign下拉选择框多选一行展示不换行_第1张图片

框架:Vue+AntdesignVue

业务中使用下拉框时,遇到多选但是换行造成整体表单布局不美观,所以这时候需要前端对下拉框做些修整以及改观

不多说废话,直接贴代码:

view层:


                  
                    
                      
                        
                        {
    {item.name}}
                      
                    
                  
                

css层:

.sitemore {
  width: 320px;
  height: 40px;
  display: flex;
  line-height: 40px;
  align-items: center;
  /deep/ .ant-select-selection--multiple {
    width: 100%;
    height: 32px;
    /deep/ .ant-select-selection__rendered {
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        display: -webkit-box;
        &::-webkit-scrollbar {
          width: 5px;
          height: 5px;
        }
        &::-webkit-scrollbar-track {
          background-color: #dedede;
          -webkit-border-radius: 1em;
          -moz-border-radius: 1em;
          border-radius: 1em;
        }
        &::-webkit-scrollbar-thumb {
          background-color: #bfbfbf;
          -webkit-border-radius: 1em;
          -moz-border-radius: 1em;
          border-radius: 1em;
        }
        & > li {
          padding: 0px 10px 0px 5px;
          box-sizing: border-box;
          width: 75px;
          float: unset;
        }
      }
    }
  }
}

 

你可能感兴趣的:(Vue,AntdesignVue,多选下拉框一行展示)