67，element包括各种表单项对齐

最新推荐文章于 2024-04-15 20:26:30 发布

越努力，越幸运..........

最新推荐文章于 2024-04-15 20:26:30 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： element 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_47254130/article/details/125763921

本文详细解读了如何使用CSS Flexbox实现页面上的表单元素布局，包括不同类别的样式调整，如固定宽度、多行文本处理和自适应内容。重点介绍了`.zh-page_formwrap_base`、`.zh-page-form_formitem_base`等类的作用，以及如何根据名称长度调整表单展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.zh-page_formwrap_base {
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  //表单项在右边且不需要验证,防止整体表单右边对不齐
  .zh-noquire-pr {
    padding-right: 15px;
  }
  //表单 label-默认4个字
  .zh-page-form_formitem_base {
    display: flex;
    margin-bottom: 16px;
    min-width: 400px;
    .el-form-item__label {
      width: 60px;
      margin-right: 16px;
      line-height: 36px;
      font-family: PingFang SC;
      font-size: 12px;
      color: #A3AFBB;
      font-weight: 600;
      padding-right: 0;
    }
    .el-form-item__label::before {
      content: none !important;
    }
    .el-form-item__content {
      width: 384px;
      text-align: left;
      .el-input--small .el-input__inner {
        width: 100%;
        height: 36px;
        line-height: 36px;
      }
    }
  }
  .zh-page-form_formitem_base-more{
    display: flex;
    margin-bottom: 16px;
    .el-form-item__label {
      width: 60px;
      max-width: 60px;
      margin-right: 16px;