Update CSS styles for better layout

tgx1587900660 · Feb 7, 2024 · cfe935c · cfe935c
1 parent 98bb12d
commit cfe935c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/html/03.横向滚动列表.html b/src/html/03.横向滚动列表.html
@@ -17,6 +17,9 @@
         justify-content: center;
         flex-direction: column;
       }
+      .main > div {
+        width: 100%;
+      }
       .scroll-box {
         position: relative;
         width: 50%;
@@ -55,14 +58,14 @@
   </head>
   <body>
     <div class="main">
-      <pre>
+      <div>
         <h1>01. 自适应的 图片横向滚动列表</h1>
-        <p> 实现滚动：            通过设置父元素的 width: 100% + overflow: scroll; </p>
-        <p> 消除间隙：            vertical-align: bottom; 因为图片默认底部对齐于 【基线】</p>
-        <p> 去除滚动条：          ::-webkit-scrollbar { display: none; } </p>
-        <p> 一行显示：            display: inline-flex; </p>
-        <p>防止 item项 被挤压:    flex-shrink: 0; </p>
-      </pre>
+        <p>实现滚动： 通过设置父元素的 width: 100% + overflow: scroll;</p>
+        <p>消除间隙： vertical-align: bottom; 因为图片默认底部对齐于 【基线】</p>
+        <p>去除滚动条： ::-webkit-scrollbar { display: none; }</p>
+        <p>一行显示： display: inline-flex;</p>
+        <p>防止 item项 被挤压: flex-shrink: 0;</p>
+      </div>
 
       <div class="scroll-box">
         <div class="scroll-list">

diff --git a/src/html/04.横向滚动列表-点击轮播.html b/src/html/04.横向滚动列表-点击轮播.html
@@ -17,6 +17,9 @@
         justify-content: center;
         flex-direction: column;
       }
+      .main > div {
+        width: 100%;
+      }
       .scroll-box {
         position: relative;
         width: 50%;
@@ -79,12 +82,12 @@
   </head>
   <body>
     <div class="main">
-      <pre>
+      <div>
         <h1>02. 横向滚动 - 一次轮播一张（不过宽度有小数点，会导致滑动不精准）</h1>
         <p>css 的 scroll-behavior: smooth; 可以开启平滑滚动</p>
-        <p>ele.getBoundingClientRect() 方法 可精确到小数点， 而 ele.clientWidth  offsetWidth只能获取整数</p>
+        <p>ele.getBoundingClientRect() 方法 可精确到小数点， 而 ele.clientWidth offsetWidth只能获取整数</p>
         <p>getComputedStyle(ele).gap 方法可以获取 flex 布局的 gap 值，不过带单位</p>
-      </pre>
+      </div>
 
       <div class="scroll-box">
         <div class="scroll-list">