diff --git a/layouts/index.html b/layouts/index.html
index 4391657..62a2de2 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -214,12 +214,7 @@
                 
 
       <div id="act-cn-tabs">
-          <ul class="act-menu">
-              <li id="one1" onclick="setTab('one',1)">灵活的请求响应</li>
-              <li id="one2" onclick="setTab('one',2)">强大的Extractors</li>
-              <li id="one3" onclick="setTab('one',3)">轻松处理表单</li>
-              <li id="one4" onclick="setTab('one',4)">请求路由</li>
-            </ul>
+        
             <div id="content">
                 <div id="con_one_1">
                     <h2>灵活的请求响应</h2>
@@ -293,10 +288,15 @@
     }` "rust" "" }}
                 </div>
             </div>
+
+              <ul class="act-menu">
+                <li id="one1" onclick="setTab('one',1)">灵活的请求响应</li>
+                <li id="one2" onclick="setTab('one',2)">强大的Extractors</li>
+                <li id="one3" onclick="setTab('one',3)">轻松处理表单</li>
+                <li id="one4" onclick="setTab('one',4)">请求路由</li>
+            </ul>
       </div>
 
-
-
     </div>
 </div>
 
diff --git a/static/css/actix.css b/static/css/actix.css
index 3c0537d..f02d0e7 100644
--- a/static/css/actix.css
+++ b/static/css/actix.css
@@ -603,16 +603,10 @@ h5:hover a {
 
 
 #act-cn-tabs {
-  padding: 2rem 1.5rem 0.5rem 2rem;
+  padding: 2rem 2rem 1rem 2rem;
   margin: 2rem auto;
   background:#dceaea;
 }
-
-.act-menu{
-  width: 24%;
-  float: right;
-  border-right:#cccccc solid 1px;
-}
 .act-menu li{
   text-align:center;
   line-height:44px;
@@ -620,7 +614,19 @@ h5:hover a {
   overflow:hidden;
 }
 .act-menu li.off{
+  padding: 0 1.5rem;
   background:#FFFFFF;
-  color:#000000;
+  color:#589c9e;
   font-weight:bold;
+}
+
+@media (min-width: 768px) {
+  #act-cn-tabs {
+    display: flex;
+    flex-flow: row;
+    padding: 2rem 1rem 1rem 2rem;
+  }
+  #act-cn-tabs #content {
+      width: 77%;
+  }
 }
\ No newline at end of file