diff --git a/core/frontend/src/components/dataease/DeOutWidget.vue b/core/frontend/src/components/dataease/DeOutWidget.vue
index d68712a26c..237796980c 100644
--- a/core/frontend/src/components/dataease/DeOutWidget.vue
+++ b/core/frontend/src/components/dataease/DeOutWidget.vue
@@ -280,7 +280,7 @@ export default {
   letter-spacing: 0px !important;
   width: 100%;
   .widget-required {
-    width: calc(100% - 10px) !important;
+    width: calc(100% - 12px) !important;
     float: left !important;
   }
   .widget-required-symbol {
@@ -288,6 +288,7 @@ export default {
     height: 40px;
     line-height: 40px;
     float: right;
+    width: 12px;
   }
 }
 
diff --git a/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue b/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
index 925c67809b..ea15432607 100644
--- a/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
+++ b/core/frontend/src/views/panel/filter/filterMain/FilterHead.vue
@@ -1,6 +1,8 @@
 <template>
   <el-row>
-    <el-col :span="20">
+    <el-col
+      class="filter-field-container"
+    >
       <div class="filter-field">
         <div class="field-content">
 
@@ -13,7 +15,7 @@
                 animation="300"
                 :move="onMove"
                 class="row wrap justify-space-around theme-drag"
-                style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
+                style="width:calc(100% - 25px);height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
                 @end="end2"
               >
 
@@ -38,7 +40,9 @@
         </div>
       </div>
     </el-col>
-    <el-col :span="4">
+    <el-col
+      class="filter-required-container"
+    >
       <div class="de-filter-required">
         <el-checkbox
           v-model="element.options.attrs.required"
@@ -105,6 +109,14 @@ export default {
 
 </script>
 <style lang="scss" scoped>
+.filter-field-container {
+  width: calc(100% - 70px);
+  float: left;
+}
+.filter-required-container {
+  width: 70px;
+  float: right;
+}
 .de-filter-required {
   height: 40px;
   line-height: 40px;
@@ -116,7 +128,7 @@ export default {
   overflow-x: overlay;
   .field-content {
     position: relative;
-    display: table;
+    // display: table;
     width: 100%;
     height: 100%;
     white-space: nowrap;