fix form-item style (#5588)

* fix form-item style

* add tips

examples/docs/en-US/form.md

@@ -283,7 +283,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
   <el-form-item label="Activity form">
     <el-input type="textarea" v-model="form.desc"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="120px">
     <el-button type="primary" @click="onSubmit">Create</el-button>
     <el-button>Cancel</el-button>
   </el-form-item>
@@ -445,7 +445,7 @@ Form component allows you to verify your data, helping you find and correct erro
   <el-form-item label="Activity form" prop="desc">
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="120px">
     <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
     <el-button @click="resetForm('ruleForm')">Reset</el-button>
   </el-form-item>
@@ -525,7 +525,7 @@ Form component allows you to verify your data, helping you find and correct erro
   <el-form-item label="Age" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="120px">
     <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
     <el-button @click="resetForm('ruleForm2')">Reset</el-button>
   </el-form-item>
@@ -634,7 +634,7 @@ Form component allows you to verify your data, helping you find and correct erro
   >
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="120px">
     <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
     <el-button @click="addDomain">New domain</el-button>
     <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
@@ -700,7 +700,7 @@ Form component allows you to verify your data, helping you find and correct erro
   >
     <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="100px">
     <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
     <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
   </el-form-item>
@@ -734,6 +734,10 @@ Form component allows you to verify your data, helping you find and correct erro
 ```
 :::
 
+:::tip
+If an `el-form-item` has an empty `label`, and you wish to align it with other items, please add `label-width` on that `el-form-item`.
+:::
+
 ### Form Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/zh-CN/form.md

@@ -277,7 +277,7 @@
   <el-form-item label="活动形式">
     <el-input type="textarea" v-model="form.desc"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="80px">
     <el-button type="primary" @click="onSubmit">立即创建</el-button>
     <el-button>取消</el-button>
   </el-form-item>
@@ -436,7 +436,7 @@
   <el-form-item label="活动形式" prop="desc">
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="100px">
     <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
     <el-button @click="resetForm('ruleForm')">重置</el-button>
   </el-form-item>
@@ -515,7 +515,7 @@
   <el-form-item label="年龄" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="100px">
     <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
     <el-button @click="resetForm('ruleForm2')">重置</el-button>
   </el-form-item>
@@ -623,7 +623,7 @@
   >
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="100px">
     <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
     <el-button @click="addDomain">新增域名</el-button>
     <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
@@ -688,7 +688,7 @@
   >
     <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
   </el-form-item>
-  <el-form-item>
+  <el-form-item label-width="100px">
     <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
     <el-button @click="resetForm('numberValidateForm')">重置</el-button>
   </el-form-item>
@@ -722,6 +722,10 @@
 ```
 :::
 
+:::tip
+当 `el-form-item` 的 `label` 属性为空时，如果希望和其他 `label` 属性不为空的表单项内容对齐，请在 `el-form-item` 上设置 `label-width` 属性。
+:::
+
 ### Form Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/form/src/form-item.vue

@@ -85,7 +85,9 @@
       },
       contentStyle() {
         var ret = {};
+        const label = this.label;
         if (this.form.labelPosition === 'top' || this.form.inline) return ret;
+        if (!label && !this.labelWidth) return ret;
         var labelWidth = this.labelWidth || this.form.labelWidth;
         if (labelWidth) {
           ret.marginLeft = labelWidth;

packages/theme-default/src/form.css

@@ -41,10 +41,6 @@
 
     & .el-form-item {
       margin-bottom: 0;
-
-      & .el-form-item__content {
-        margin-left: 0 !important;
-      }
     }
 
     @e label {