diff --git a/index.html b/index.html
index 032d864..167459e 100644
--- a/index.html
+++ b/index.html
@@ -18,20 +18,26 @@
 
       .button-container {
         position: absolute;
-        top: 10px;
-        left: 10px;
+        top: 0;
+        left: 0;
         display: flex;
-        justify-content: center;
+        flex-wrap: wrap;
+        gap: 10px;
+        background-color: rgba(255, 255, 255, 0.8);
+        padding: 10px;
       }
 
       .button-container button {
-        margin: 0 10px;
-        padding: 6px 10px;
+        flex: 1 0 auto;
+        max-width: 100%;
+        box-sizing: border-box;
+        padding: 4px 10px;
         background-color: #3498db;
         color: #ffffff;
         border: none;
         border-radius: 5px;
         cursor: pointer;
+        transition: background-color 0.3s, transform 0.2s;
       }
     </style>
   </head>
@@ -55,6 +61,25 @@
       <button id="remove">删除</button>
       <button id="addEvent">绑定事件</button>
       <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
+      <button id="removeEvent">解绑事件</button>
     </div>
     <script>
       window.CESIUM_BASE_URL = './examples/cesium';