1

リンクのリストを含むサイドバーがあり、各リンクの右側に矢印アイコンがあります (:after セレクターを使用してアンカー スタイルで設定します)。多くのリンクで、矢印が独自の行にドロップダウンしています。テキストが必要に応じて新しい行に分割できることを確認したいのですが、矢印が単独で行に孤立しないようにします。

:after 疑似要素で「空白: nowrap」を使用することで問題を解決したと思いました。これは Firefox で機能したためです。残念ながら、IE8、Chrome、Safari では動作しないことがわかりました。

Firefox、IE8、Chrome、および Safari で、必要に応じてリンク内のテキストを折り返すことを許可しながら、リンク アイコンが独自の行に分割されないようにする方法はありますか?

基本的な HTML 構造:

<div id="sidebar">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 12</a></li>
  </ul>
</div>

スタイル ルール (sass で記述):

div#sidebar
  width: 170px

  a:after
    content: url('images/icon_double-arrow.png')
    margin: 0 0 0 6px
    white-space: nowrap
4

2 に答える 2

0

私は問題を解決したと信じています。矢印の画像がアンカーの背景として設定されるようにスタイルを変更し、矢印の画像を :after コンテンツとして設定する代わりに、パディングを使用して右側に配置しました。上記のすべてのブラウザーで動作します: a border: 0 background: url('images/icon_arrow.png') no-repeat right center padding-right: 15px

于 2013-09-30T18:10:57.270 に答える
-1

最も簡単な解決策は、おそらく、生成されたコンテンツで画像ではなく文字を使用することです。

content: '\bb';

現在使用している画像に似た「»」U+00BB RIGHT-POINTING DOUBLE ANGLE QUOTATION MARKを使用する、または

content: '\2192';

矢印文字「→」を使用するには U+2192 RIGHTWARDS ARROW.

IE が奇妙な動作をする理由は、インライン コンテキストで表示される場合、スペースが介在していなくても (例: sometext<img ...>)、画像をその前の改行を許可するものとして一般的に処理するためと思われます。代わりに文字を使用し、その前にスペース文字を入れない場合、IE はテキストの改行ルールを適用します (これはIE では非常に奇妙ですが、たとえば「foo»」の「»」の前では改行を許可しません)。

于 2012-10-21T06:37:53.623 に答える