ホームページ  >  に質問  >  本文

ul と li の設定を確認してください

<!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 サイズに縮小されません。これはなぜですか?

益伦益伦2522日前1169

全員に返信(1)返信します

  • chobits4

    chobits42017-12-11 09:02:48

    この問題を解決するには、次の 2 つの方法を使用することをお勧めします: 1. ソース画像のサイズを変更します。 2. li:before を使用してセットアップします

    li{
       list-style: none;
    }
    li:before{
       content: '';
       display: inline-block;
       height: y;
       width: x;
       background-image: url();
    }


    返事
    2
  • キャンセル返事