关于多行文字和序号或者图片对齐的问题

最新推荐文章于 2023-10-25 21:55:23 发布

鹤_

最新推荐文章于 2023-10-25 21:55:23 发布

阅读量3.6k

点赞数 2

分类专栏： css知识点文章标签： text-indent 多行文字和序号对齐多行文字和图片对齐

本文链接：https://blog.csdn.net/weixin_39855431/article/details/80101716

版权

css知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在写页面的过程中经常遇见这样的样式

（1）多行文字和序号顶部对齐

实现的办法有很多种，比如序号和文字在两个标签内直接设置一个顶部对齐的属性vertial-align:top;即可对齐，这种虽然易实现，但是会对写一个标签实现的方法如下：

那么如果序号和文字在一个段落里面，就有一个更简单的方法直接用text-indent属性来实现，不需要多加标签，一个属性就可以实现，具体代码如下（推荐使用）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul{
			list-style-type: none;
			overflow:hidden;
		} 
		ul li{
			text-indent:-20px;
			padding-left:20px;
			/* 加一个padding的目的是因为负的text-indent会把序号挤到标签外，如果父级设置了overflow:hidden;序号就会被隐藏掉，为了防止出现这种情况，所以加上，也为了以后不给自己留坑 */
		}
		
	</style>
</head>
<body>
	<ul>
		<li>
			1.大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多
		</li>
		<li>
			2.大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多
		</li>
		<li>
			3.大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多
		</li>
	</ul>
</body>
</html>

实现的效果如下：

（2）多行文字和图片对齐

同样有很多种方法可以实现比如：

效果如下：

这样可以实现，同样使用text-indent也可以实现，具体如下（推荐使用）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul{
			list-style-type: none;
			overflow:hidden;
		} 
		ul li{
			text-indent:-50px;
			padding-left:50px;
			/* 加一个padding的目的是因为负的text-indent会把序号挤到标签外，如果父级设置了overflow:hidden;序号就会被隐藏掉，为了防止出现这种情况，所以加上，也为了以后不给自己留坑 */
		}
		ul li:before {  
	        content: " ";  
	        background: url(../img/01.png) 0 0 no-repeat;  
	        background-size: 50px 50px;  
	        padding:0px 50px 50px 0px 
	    }  
	</style>
</head>
<body>
	<ul>
		<li>
			大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群
		</li>
		<li>
			大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群
		</li>
		<li>
			大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群大萨达撒多撒多无群的无群二无群
		</li>
	</ul>
</body>
</html>

实现的效果如下：

那么这个简单的小效果就实现了，实现的方法有很多种，那么哪一种最合适呢，就要看实际应用了，我们发现用padding和text-indent都可以实现，那么区别在哪里呢？

主要区别有：

text-indent是首行缩进，第二行或者第三行不会被缩紧。常用于段落排版使用，仅适用于块级元素，不计入这一行的总宽度。

padding-left块级元素行内元素都可以，计入这一行的总宽度。整个部分都缩进。

text-indent比padding的渲染也要快，因为它不涉及到盒模型，但凡涉及到盒模型的属性，都要参与页面渲染中的computing过程中的整套运算，还要参与后期因为某些原因触发的回流整套运算。所以在做页面的时候，如果单行文字左间距，首选text-indent;

补充：

text-indent还有一个用法就是seo优化，如果在页面中使用图片的情况，图片对应的信息爬虫是查不到的，这时候用负的text-indent,配合相应得overflow:hidden;把文字隐藏在里面，这样爬虫也能爬到

再补充一点就是在写样式的时候设置和盒模型相关的属性，比如width、height、min-height、min-width、margin、padding、border、display等，在渲染页面的时候都会参与computing的计算过程，所以会影响页面的加载速度，虽然影响很小，但是如果很多就会影响很大，所以能不用这些属性解决就不用，还有就是页面设置的百分比、auto、或者rem、em等，都会参与computing的过程，会把这些值计算成px再渲染出来，在控制台的位置有一个computed里面能看到