简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  CSS-Problemlösung bezüglich der Position des Listenstil-Bildsymbols

CSS-Problemlösung bezüglich der Position des Listenstil-Bildsymbols

黄舟
黄舟Original
2017-06-29 10:18:172492Durchsuche

Der Quellcode lautet wie folgt: 

<!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>

Der Laufeffekt ist wie in der Abbildung dargestellt. Ich möchte, dass das Bild vollständig angezeigt werden kann. Wenn das Problem gelöst werden kann, fügen Sie Punkte hinzu

CSS-Problemlösung bezüglich der Position des Listenstil-Bildsymbols

<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>

Das obige ist der detaillierte Inhalt vonCSS-Problemlösung bezüglich der Position des Listenstil-Bildsymbols. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS: list-style-image legt ein Bild im Detail als Listenelement-Markup festNächster Artikel：CSS: list-style-image legt ein Bild im Detail als Listenelement-Markup fest

In Verbindung stehende Artikel

Mehr sehen