CSS怎样设置元素距离一半的画框

使用伪类的实现方法。

HTML的结构

   
            
              
              
                
              
              
                
              
              
                重置
              
            
          

重点CSS样式:

.form-header-box {
  ::v-deep .el-input__inner {
    border-radius: 4px 0 0 4px;
    border-right: 0;
  }
  ::v-deep .el-form-item__content {
    line-height: 0;
  }
  ::v-deep .el-button {
    border-radius: 0 4px 4px 0;
  }
  ::v-deep .el-form-item__label {
    line-height: 32px;
  }
  .mini-search ::v-deep .el-button {
    border-radius: 0;
    border-left: 0;
  }
  .mini-search {
    position: relative;
  }
  .mini-search:after {
    content: ;
    position: absolute;
    height: 50%;
    border-left: 1px solid rgb(220, 223, 230);
    top: 25%;
  }
  // ::v-deep .
}

提取的更重要的代码是

  .mini-search {
    position: relative;
  }
  .mini-search:after {
    content: ;
    position: absolute;
    height: 50%;
    border-left: 1px solid rgb(220, 223, 230);
    top: 25%;
  }

左半部的垂直线通过绝对定位和伪类实现。
以下是效果图：