diff --git a/templates/index.html b/templates/index.html
index 55394d4..9696b79 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -77,12 +77,13 @@
         .send-btn:disabled { background: #ccc; cursor: not-allowed; }
         
         /* 快捷语句 - 横向扁平 */
-        .quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; overflow-x: auto; padding: 4px 0; }
-        .quick-phrases-bar::-webkit-scrollbar { height: 4px; }
-        .quick-phrases-bar::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
-        .add-phrase-btn { padding: 6px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; white-space: nowrap; }
+        .quick-phrases-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; position: relative; }
+        .add-phrase-btn { padding: 6px 10px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-size: 12px; color: #666; white-space: nowrap; flex-shrink: 0; }
         .add-phrase-btn:hover { background: #e8e8e8; }
-        .phrase-list { display: flex; gap: 6px; flex: 1; }
+        .phrase-list-wrapper { flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
+        .phrase-list-wrapper::-webkit-scrollbar { height: 4px; }
+        .phrase-list-wrapper::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
+        .phrase-list { display: flex; gap: 6px; padding: 4px 0; }
         .phrase-tag { padding: 6px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 16px; cursor: pointer; font-size: 13px; color: #333; white-space: nowrap; transition: all 0.2s; position: relative; }
         .phrase-tag:hover { background: #e8f5e9; border-color: #10a37f; }
         .phrase-tag .tag-delete { display: none; margin-left: 6px; color: #999; }
@@ -135,7 +136,9 @@
                 </div>
                 <div class="quick-phrases-bar">
                     <button class="add-phrase-btn" onclick="showAddPhraseModal()"><i class="ri-add-line"></i> 添加</button>
-                    <div class="phrase-list" id="quickPhrasesList"></div>
+                    <div class="phrase-list-wrapper" id="phraseListWrapper" onwheel="scrollPhrases(event)">
+                        <div class="phrase-list" id="quickPhrasesList"></div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -414,6 +417,13 @@
             renderQuickPhrases();
         }
         
+        // 鼠标滚轮横向滚动
+        function scrollPhrases(e) {
+            const wrapper = document.getElementById('phraseListWrapper');
+            wrapper.scrollLeft += e.deltaY;
+            e.preventDefault();
+        }
+        
         function showAddPhraseModal() {
             document.getElementById('phraseModal').classList.add('show');
             document.getElementById('newPhraseInput').value = '';