modified: styles.css

modified:   test.html

styles.css

@@ -4,6 +4,7 @@
 
 /* 选项卡按钮样式 */
 .tab {
+    display: flex;
     overflow: hidden;
     border: 1px solid #ff69b4; /* 粉色边框 */
     background-color: #ffc0cb; /* 粉色背景 */
@@ -136,3 +137,19 @@ span {
     font-size: 1.2em;
     font-weight: bold;
 }
+#tab-container {
+    display: flex;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+/* .tab {
+    display: flex;
+} */
+
+.tablinks {
+    display: inline-block;
+    padding: 10px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+}

test.html

@@ -12,6 +12,7 @@
         <input type="range" id="mySlider" min="0" max="100" value="50">
         <span id="sliderValue">50</span>
     </div>
+    <div class="tab-container">
         <div class="tab">
             <button class="tablinks" data-tab="Tab0">日历</button>
             <button id="addTab" class="addTab">+</button>