Home > Web Front-end > HTML Tutorial > css基础组件库(兼容低版本)_html/css_WEB-ITnose

css基础组件库(兼容低版本)_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 09:09:08
Original
1561 people have browsed it

1、图标跟文字混排
html

<div class="link">    <span class="icon wyyx"></span>    分享</div>
Copy after login

css

.link{    width: 92px;    border: 1px solid #0f0;    line-height: 18px;}.icon{    display: inline-block;    *zoom: 1;    vertical-align: bottom;}.wyyx{    width: 18px;    height: 18px;    background: url(http://p2.qhimg.com/t0116804ffa3cc8a59f.png) no-repeat;}
Copy after login

截图:

注意:

父容器的line-height值与图标的高度相等,另保持设置图标的vertical-align的值为bottom。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template