<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ドキュメント</title> <style> ul{ &n

この問題を解決するには、次の 2 つの方法を使用することをお勧めします: 1. ソース画像のサイズを変更します。 2. li:before を使用してセットアップします li{ list-style: none; } li:before{ content: ''; display: inline-block; height: y; width: x; background-image: url(); }

ul と li の設定を確認してください-PHP中国語ネットワークQ&A

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ;Document</title>
<style>
ul{
/*デフォルトの小さなドット*/
list-style-type: disc;
/*中空の小さなドット* /
list-style-type:circle;
/*小さな実線の正方形*/
list-style-type:square;
/*番号付きリストに変換された数値シーケンス*/
list-style-type: 10 進数;
/*シリアル番号の前に 0 を追加します: 例: 01、02、03*/
list-style-type: 10 進数先頭ゼロ;
/ *画像を使用する原点ではなく、サイズが非常に小さくて使いにくいため、代わりに li タグを直接制御します */
/*list-style-image: url(1.jpg);*/
}
/*リスト項目の自動定義*/
li{
/*ドットのキャンセル*/
list-style-type: none;
/*画像の位置を予約*/
padding-left: 2em;
/*画像をアップロード*/
list-style-image: url(1.jpg);
/*画像リスト項目は繰り返されません*/
背景-repeat: no-repeat;
/*画像サイズ*/
background-size: 1em 1em;
/*画像位置設定、テキスト上部グリッドとの位置合わせ、xy 軸目視検査*/
背景位置: 0 4px;
}
</style>
</head>
<body>
<h3>フロントエンド開発ツール</h3> ;
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
;li> Bootstrap</li>
</ul>
</body>
</html>

表示される結果参照される画像リスト項目は依然として非常に大きく表示され、1em サイズに縮小されません。これはなぜですか?