一級標題居中，二級標題固定縮排
阿新 • • 發佈：2019-02-01
技術群裡別人問到的，正好空閒實現了一下效果，並記下筆記。
效果：一級、二級標題為自定義長度，且一級標題居中，二級標題在一級標題的基礎上縮排3個漢字的距離。
如圖：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body,html{ width: 100%; height:100%; } .oDiv{ /*父元素div寬度不能寫成固定寬*/ margin:0 auto; } .h1{ font-size:16px; } .h2{ font-size:14px; white-space: nowrap;/*強制文字不換行*/ margin-left:48px;/*縮排3個漢字，一級標題字號font-size*3;text-indent不生效所以用margin-left */ } </style> <script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ var h1 = $('.h1').width();//獲取一級標題的寬度 $('.oDiv').css("width",h1);//div有了寬度之後才能用margin:0 auto; }) </script> </head> <body> <div class="oDiv"> <span class="h1">有朋自遠方來，不亦樂乎</span> <span class="h2">--我要上王者我要上王者我要上王者我要上王者我要上王者我要上王者</span> </div> </body> </html>