ホームページ >ウェブフロントエンド >htmlチュートリアル >css基本コンポーネントライブラリ（下位バージョン互換）_html/css_WEB-ITnose
css基本コンポーネントライブラリ（下位バージョン互換）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:09:081550ブラウズ
1. アイコンとテキストの混合配置
html
<div class="link"> <span class="icon wyyx"></span> 分享</div>
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;} スクリーンショット:
注:
親コンテナの行の高さの値はアイコンの高さと等しく、垂直方向の配置はアイコンの値が下に設定されます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。