0

スプライトをLI要素の右側に配置できないようです

<li class="menuItems">
      <div style="background: #ffffff url('pixmaps/glyphicons.png') no-repeat 
-553px -56px; height:27px;width:29px;background-position: -30px 0px;">
        <a href="#"  >Streams</a>
    </div>
</li>

奇妙な配置

私はdivの有無にかかわらず試してみました-スプライトの背景をliまたは要素に配置しましたが、ほとんど同じように動作しました。liのパディング（よく読まれる解決策）を変更すると、-Linkが台無しになり、この位置に留まるはずです。

では、これを解決する適切な方法は何ですか？確かに、スプライトを変更して巨大な透明なスペースを追加することはできますが、私のスプライトにはグリフィコンセット全体（400以上のアイコン+さらにロールオーバー用の暗いトーンのすべてのアイコン）が含まれているため、実際にはそうはいきません。

ありがとうございました！

4

1 に答える 1

3

私はこれをコメントとして残すつもりでしたが、実際にはもっと答えです。

追加の要素を使用する場合は、通常、スパンを使用します。に設定し、display: blockとも設定します（アイコンの正確なサイズに設定します）。レイアウトに影響を与えたくない場合は、に設定し、配置するには、などを実行します。を使用する場合は、親にも位置設定が設定されていることを確認する必要があります。heightwidthposition: absoluteright: 10px; top: 10pxposition: absoluteposition: relative

完全な例：

.icon {
  position: absolute;
  display: block;
  width: 32px;
  height: 32px;
  top: 4px;
  right: 4px;
  background: url('pixmaps/glyphicons.png') no-repeat -553px -56px; /* set the offset to the exact position of your icon */
}

.menuItems {
  position: relative;
}
于 2013-02-13T17:01:53.370 に答える