Heim > Web-Frontend > HTML-Tutorial > css笔记--小图标文字对齐中级解决方案_html/css_WEB-ITnose

css笔记--小图标文字对齐中级解决方案_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:22:51
Original
1262 Leute haben es durchsucht

出处: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'; }
Nach dem Login kopieren

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>
Nach dem Login kopieren

 

效果图1 小字号

  

 

2 大字号

 

  

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage