diff --git a/core/core-frontend/src/components/drawer-filter/src/DrawerEnumFilter.vue b/core/core-frontend/src/components/drawer-filter/src/DrawerEnumFilter.vue
index ce58700b7f..6b7d690d2c 100644
--- a/core/core-frontend/src/components/drawer-filter/src/DrawerEnumFilter.vue
+++ b/core/core-frontend/src/components/drawer-filter/src/DrawerEnumFilter.vue
@@ -52,9 +52,7 @@ defineExpose({
 </template>
 <style lang="less" scope>
 .draw-filter_enum {
-  display: flex;
-  align-items: center;
-  min-height: 46px;
+  margin-bottom: 4px;
 
   > :nth-child(1) {
     color: var(--deTextSecondary, #1f2329);
@@ -62,14 +60,12 @@ defineExpose({
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
-    line-height: 24px;
+    line-height: 22px;
     white-space: nowrap;
-    width: 116px;
   }
 
   .filter-item {
-    flex: 1;
-
+    margin-top: 8px;
     .item,
     .more {
       font-family: var(--de-custom_font, 'PingFang');
@@ -85,7 +81,7 @@ defineExpose({
       border-radius: 2px;
       cursor: pointer;
       display: inline-block;
-      // margin-bottom: 12px;
+      margin-bottom: 12px;
     }
 
     .active,
diff --git a/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue b/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue
index 3834ac703b..fb242841ab 100644
--- a/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue
+++ b/core/core-frontend/src/components/drawer-filter/src/DrawerFilter.vue
@@ -69,9 +69,7 @@ defineExpose({
 </template>
 <style lang="less" scope>
 .draw-filter_base {
-  display: flex;
-  align-items: center;
-  min-height: 46px;
+  margin-bottom: 16px;
 
   > :nth-child(1) {
     color: var(--deTextSecondary, #1f2329);
@@ -79,13 +77,12 @@ defineExpose({
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
-    line-height: 24px;
+    line-height: 22px;
     white-space: nowrap;
-    width: 116px;
   }
 
   .filter-item {
-    flex: 1;
+    margin-top: 8px;
   }
 }
 </style>
diff --git a/core/core-frontend/src/components/drawer-filter/src/DrawerTimeFilter.vue b/core/core-frontend/src/components/drawer-filter/src/DrawerTimeFilter.vue
index 60bc5f1508..bb4da7e117 100644
--- a/core/core-frontend/src/components/drawer-filter/src/DrawerTimeFilter.vue
+++ b/core/core-frontend/src/components/drawer-filter/src/DrawerTimeFilter.vue
@@ -83,22 +83,19 @@ defineExpose({
 </template>
 <style lang="less" scope>
 .draw-filter_time {
-  display: flex;
-  align-items: center;
-  min-height: 46px;
+  margin-bottom: 16px;
 
   > :nth-child(1) {
     color: var(--deTextSecondary, #1f2329);
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
-    line-height: 24px;
+    line-height: 22px;
     white-space: nowrap;
-    width: 116px;
   }
 
   .filter-item {
-    flex: 1;
+    margin-top: 8px;
     .ed-date-editor {
       width: 100%;
     }
diff --git a/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue b/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue
index 1674096efe..4f00071f04 100644
--- a/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue
+++ b/core/core-frontend/src/components/drawer-filter/src/DrawerTreeFilter.vue
@@ -98,9 +98,7 @@ defineExpose({
 </template>
 <style lang="less" scope>
 .draw-filter_tree {
-  display: flex;
-  align-items: center;
-  min-height: 46px;
+  margin-bottom: 16px;
 
   > :nth-child(1) {
     color: var(--deTextSecondary, #1f2329);
@@ -108,13 +106,12 @@ defineExpose({
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
-    line-height: 24px;
+    line-height: 22px;
     white-space: nowrap;
-    width: 116px;
   }
 
   .filter-item {
-    flex: 1;
+    margin-top: 8px;
   }
 }
 </style>