一级标题居中，二级标题固定缩进

来源：互联网发布：北京市网络职业学院编辑：程序博客网时间：2024/06/06 20:53

技术群里别人问到的，正好空闲实现了一下效果，并记下笔记。

效果：一级、二级标题为自定义长度，且一级标题居中，二级标题在一级标题的基础上缩进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>

阅读全文

0 0