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

最新推荐文章于 2024-07-31 14:17:42 发布

西风XF

最新推荐文章于 2024-07-31 14:17:42 发布

阅读量1.3w

点赞数

分类专栏： css 文章标签： css 标题缩进 text-indent white-space

本文链接：https://blog.csdn.net/qq_36242361/article/details/76177346

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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