ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS コントロールのテキストの前の小さなアイコン

CSS コントロールのテキストの前の小さなアイコン

高洛峰
リリース: 2016-11-24 11:22:35
オリジナル
2012 人が閲覧しました

一部のリスト項目では、以下に示すように、テキストの前に小さなアイコンを追加する必要があります。

CSS コントロールのテキストの前の小さなアイコン

実装方法は多数ありますが、ここでは 要素が使用されます。

spam タグは線要素であり、幅と高さはありませんが、display:block; によって変更できます。ただし改行が発生します。

投稿コード:

[html]   www.php.cn
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span>  
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span>  
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span>  
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span>  
 
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项1</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项2</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项3</span>
<span style="padding-left:19px;background:url(a.jpg) no-repeat;">选项4</span>
ログイン後にコピー

Padding-left は、この小さなアイコンの外観を実現するためにここで使用されており、テキストを右にクリックさせることになります


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート