diff --git a/novel-front/src/main/resources/templates/books/book_detail.html b/novel-front/src/main/resources/templates/books/book_detail.html
index cec9853..4aa43a4 100644
--- a/novel-front/src/main/resources/templates/books/book_detail.html
+++ b/novel-front/src/main/resources/templates/books/book_detail.html
@@ -101,6 +101,16 @@
             color: #f90;
         }
 
+        .line-limit-length {
+
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+
+            white-space: nowrap;
+
+        }
+
     </style>
 
     <script>
@@ -192,10 +202,10 @@
                 更新： <i th:text="${#dates.format(book.updateTime, 'yy-MM-dd HH:mm:ss')}"></i>
             </span>
         </h2>
-        <div class="layui-colla-content layui-show indexP">
+        <div class="layui-colla-content layui-show indexP layui-row">
 
 
-            <p style="height: 30px;line-height: 30px;padding: 10px" th:each="index : ${indexList}"><a th:href="'/book/'+${index.bookId}+'/'+${index.indexNum}+'.html'" th:text="${index.indexName}"></a></p>
+            <p class="line-limit-length layui-col-xs12 layui-col-sm4 layui-col-md3 layui-col-lg2" style="padding-left:10px;height: 50px;line-height: 50px;" th:each="index : ${indexList}"><a th:href="'/book/'+${index.bookId}+'/'+${index.indexNum}+'.html'" th:text="${index.indexName}"></a></p>
 
         </div>
     </div>
diff --git a/novel-front/src/main/resources/templates/books/book_index.html b/novel-front/src/main/resources/templates/books/book_index.html
index 4efdeb2..830b90a 100644
--- a/novel-front/src/main/resources/templates/books/book_index.html
+++ b/novel-front/src/main/resources/templates/books/book_index.html
@@ -23,6 +23,16 @@
         .indexP p a {
             color: #4c6978;
         }
+
+        .line-limit-length {
+
+            overflow: hidden;
+
+            text-overflow: ellipsis;
+
+            white-space: nowrap;
+
+        }
     </style>
     </div>
 
@@ -71,14 +81,20 @@
 
 <p style="height: 30px;line-height: 30px;padding: 10px">
 
-    <a href="#buttom" style="color: red">↓直达页面底部</a>
+    <a href="#buttom" style="color: red">&nbsp;&nbsp;↓直达页面底部</a>
 </p>
 
-<p style="height: 30px;line-height: 30px;padding: 10px" th:each="index : ${indexList}">
-    <a th:href="'/book/'+${index.bookId}+'/'+${index.indexNum}+'.html'" th:text="${index.indexName}">
 
-    </a>
-</p>
+<div class="layui-colla-content layui-show indexP layui-row">
+    <p class="line-limit-length layui-col-xs12 layui-col-sm4 layui-col-md3 layui-col-lg2" style="padding-left:10px;height: 50px;line-height: 50px;" th:each="index : ${indexList}">
+        <a th:href="'/book/'+${index.bookId}+'/'+${index.indexNum}+'.html'" th:text="${index.indexName}">
+
+        </a>
+    </p>
+
+
+
+</div>
 
 <div th:replace="common/footer :: footer">
 </div>