diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
index 85ca06b..b560528 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
@@ -42,6 +42,32 @@
   min-width: max-content;
   margin: 0;
 }
+.security-key-header > .security-recovery-actions {
+  display: inline-flex;
+  align-items: center;
+  align-content: center;
+  justify-content: flex-end;
+  flex-flow: row nowrap;
+  gap: 8px;
+  height: 32px;
+  min-height: 32px;
+  min-width: max-content;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.security-key-header > .security-recovery-actions :deep(.el-button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  height: 32px;
+  min-height: 32px;
+  box-sizing: border-box;
+  margin: 0 !important;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+}
 .security-key-header > .section-actions :deep(.el-button) {
   display: inline-flex;
   align-items: center;
diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
index e764d20..daaf272 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
@@ -92,7 +92,7 @@
     >
       <div class="settings-header security-key-header">
         <div><h3>安全码</h3><p class="settings-desc">安全码默认隐藏，完成安全验证后可以重新查看。</p></div>
-        <div class="section-actions">
+        <div class="section-actions security-recovery-actions">
           <el-button
             v-if="recoveryConfigured && !generatedCodes.length"
             @click="revealRecoveryCodes"