목록 스타일 이미지 아이콘 위치에 관한 CSS 문제 해결-CSS 튜토리얼-php.cn

목록 스타일 이미지 아이콘 위치에 관한 CSS 문제 해결

黄舟

풀어 주다： 2017-06-29 10:18:17

원래의

2565명이 탐색했습니다.

소스코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实验二</title>
<style type="text/css">
li.HTML5 {
list-style-image:url(HTML5和CSS3实例教程.jpg);
}
li.Program {
list-style-image:url(编程原本.jpg);
}
li.iPhone {
list-style-image:url(24小时玩转iPhone.jpg);
}
</style>
</head>

<body>
<div style="text-align:center">
<ul>
<li class="Program">编程原本</li>
<li class="iPhone">24小时玩转iPhone</li>
<li class="HTML5">HTML5和CSS3实例教程</li>
</ul>
</div>
</body>
</html>

로그인 후 복사

런닝 효과는 그림과 같습니다. 내가 원하는 것은 그림이 완전히 표시될 수 있다는 것입니다. 이 문제가 해결되면 포인트를 더 추가하세요

목록 스타일 이미지 아이콘 위치에 관한 CSS 문제 해결

<style type="text/css">
                                              /*将li设置为块状，在加个高度试试*/
                                               li{display:block; height:30px;}
			li.HTML5 {
				list-style-image:url(HTML5和CSS3实例教程.jpg);
}
			li.Program {
				list-style-image:url(编程原本.jpg);
			}
			li.iPhone {
				list-style-image:url(24小时玩转iPhone.jpg);
			}
		</style>

로그인 후 복사

위 내용은 목록 스타일 이미지 아이콘 위치에 관한 CSS 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!