list-style-image如何设置对齐且自动换行不顶格？

Surrin1999 2018-10-01 01:33:22

网上找了到了例子，但是要么就是自动换行没了缩进效果变成了这样子

代码如下



<!doctype html>

<html>

<head>

	<meta charset="utf-8">

	<title>CSS属性list-style-image</title>

	<style>

		li{

			background: url(列表图标.png) no-repeat;

			/* 对准的是增加了行高后的整个图片中心 */

			line-height: 1.6;

			text-indent: 1.8em;

		}

		ul{

 			display:inline;

 			margin: 0px;

 			padding:0px;

   			list-style-type:none;

 		}

	</style>

</head>

<body>

	<h3>属性list-style-image的应用</h3>

	<hr/>

	

	<ul>

		<li>选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一</li>

		<li>选项二</li>

		<li>选项三</li>

	</ul>

</body>

</html>

还有这个比较符合我预期的但文字和自定义图标又没能完美对齐

代码如下



<!doctype html>

<html>

<head>

	<meta charset="utf-8">

	<title>CSS属性list-style-image</title>

	<style>

		ul{

 			display:inline;

 			margin: 0px;

 			padding: 0px;

		    list-style: url(列表图标.png) outside;

 		}

 	    li{

 			margin-left:30px;

 			line-height: 20px;

 		}

	</style>

</head>

<body>

	<h3>属性list-style-image的应用</h3>

	<hr/>

	

	<ul>

		<li>选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一选项一</li>

		<li>选项二</li>

		<li>选项三</li>

	</ul>

</body>

</html>

请问有什么好的方法设置文字与图标对齐且自动换行不顶格吗 刚学css 还不是太懂

...全文

590 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

Surrin1999 2018-10-02

打赏
举报

引用 8 楼 jslang 的回复:

[quote=引用 7 楼 Surrin1999 的回复:]
[quote=引用 6 楼 jslang 的回复:]
代码一解决方法
li{
background: url(列表图标.png) no-repeat;
/* 对准的是增加了行高后的整个图片中心 */
line-height: 1.6;
padding-left: 1.8em;
}

这样我知道但是效果并不理想因为第二行不会对齐第一行[/quote]

怎么不会对齐了[/quote]
失误失误

确实可以了我忘了我之前加了个缩进去掉就好了感谢