1

Compassそこで、自動スプライトを作成するためのセットアップを行いましたSCSS。すべてがうまくいき、素敵なCSSが生成されます:-

.icons-sprite, .actions-new, .actions-edit, .actions-save, .actions-delete, .actions-refresh {
  background: url('/content/themes/admin/images/icons-s0336d5eb89.png') no-repeat;
}

.actions-new {
  background-position: 0 -48px;
}

... ... ...

現在、テーブルを作成しています。そのテーブルには、行に対して機能 (削除または編集) を実行できる「アクション列」があります。

スプライトを使用してこれらのボタンを表示するための一般的に受け入れられている方法 (html 5) は何ですか?

いくつかのオプションを検討しましたが、いくつかの問題に遭遇しました

  • spanモードにしない限りこれを表示できません。display: blockそうすると、アイテムの後に新しい行が挿入されます。すべてをフロートする必要はありません。

  • div何らかの理由で、これも表示されません

  • imgこれで私が見ている最大の問題は、srcフィールドの要件です。これは、URL を何度も複製する必要があることを意味します。

他の人はリンク内のスプライトに何を使用していますか?

4

1 に答える 1

1

スパンと を使用しますdisplay: inline-block。これにより、スパンが画像のように動作するようになるため、適用できますvertical-align: middle。インライン要素で使用する場合、サポートは IE6 までさかのぼります。

于 2012-07-29T01:04:04.880 に答える