ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS ノート -- 小さなアイコンのテキスト配置に関する中間ソリューション_html/css_WEB-ITnose

CSS ノート -- 小さなアイコンのテキスト配置に関する中間ソリューション_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:22:51
オリジナル
1247 人が閲覧しました

出处:http://www.zhangxinxu.com/study/201603/icon-text-vertical-align.html

css

.icon {     display: inline-block;     width:20px; height:20px;     background: url(delete.png) no-repeat center;     white-space:nowrap;     letter-spacing: -1em;     text-indent: -99em;     color: transparent;    /* IE7 */    *text-indent: 0;    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');}.icon:before {     content: '\3000'; }
ログイン後にコピー

html

<strong>情形1,空标签</strong><p><i class="icon"></i> 删除</p><strong>情形2,内部有文字</strong><p><a href="javascript:" class="icon">删除</a> 后面的文字</p><p style="color:gray;">--------下面是反例------</p><strong>设置了overflow:hidden</strong><p><i class="icon" style="overflow:hidden;"></i> 删除</p>
ログイン後にコピー

 

效果图1 小字号

  

 

2 大字号

 

  

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