アイコンをテキストと一致させることができませんここにフィドルがあります:jqueryアコーディオン
残りのコードはアイコンを並べるだけで十分です。jqueryによってアイコンで作成されたスパンタグをターゲットにしてみましたが、何かが足りない場合は役に立ちません。
アイコンをテキストと一致させることができませんここにフィドルがあります:jqueryアコーディオン
残りのコードはアイコンを並べるだけで十分です。jqueryによってアイコンで作成されたスパンタグをターゲットにしてみましたが、何かが足りない場合は役に立ちません。
ここに変更display: block
しdisplay: inline-block
ます:
#helpmenu h3 a { padding-right: 5px; color: #666; display: inline-block; padding-top: 8px; padding-bottom: 8px; text-decoration: none; padding-left: 18px;}
また、を削除しpadding-left
ます。また、IE7の互換性のためにこれを使用します。
*display: inline; *zoom: 1; /* Display Inline Block in IE 7 */
更新されたフィドル:http://jsfiddle.net/kZkTV/3/
代わりにをに変更し#helpmenu h3 a
て追加しました。非常に古いバージョンのIEをサポートする必要がない限り、これは機能するはずです。display: inline-block
vertical-align: middle
:first-child
また、特に(CSS2疑似クラス)に対して、あちこちのパディングにいくつかの小さな更新を行うこともできます。
アイコンを左にフロートさせる必要があります。そうすれば、彼らはに影響を与えません。 http://jsfiddle.net/kZkTV/4/
.closedacc { background: url(http://www.somesite.com/dataimages/static/faq/menuarrow-blue.jpg) no-repeat 0 9px; padding-top: 2px; padding-botttom: 2px; padding-left: 18px; float: left; width: 16px; height: 16px;}