2

折り返されたテキストの最初の行の最後の単語の後にインラインで配置したい小さな「詳細」アイコンがあります。この例の疑問符のように...

If this is my pretend ?
sentence, then I want the
icon to be in the position
where you see the question
mark... line #1 above.

答えはそうではないfloat: right;かposition: absolute; top: 0; right: 0;

これらを使うとこんな感じになります…

If this is my pretend     ?
sentence, then I want the
icon to be in the position
where you see the question
mark... line #1 above.

アイコンをインラインで表示したいのですが、テキストが動的に挿入されるため、実際にはインラインに配置したくなく、どこに配置するかを決めるのが面倒です。また、軽量なものが欲しいので、理想的には Javascript や jQuery はありません。

純粋なCSSでこれを行う方法はありますか?

jsFiddle >> http://jsfiddle.net/JTSEU/

4

2 に答える 2

0

これについては、次の記事があります。

http://www.adipalaz.com/experiments/css/positioning_inline_icon.html

ソースを表示するだけで、それがどのように行われるかを正確に確認できます。

このようなもの：

<span class="p linkicon">
  The image is absolutely positioned relative to the containing element.
  <a style="padding-right:0px" href="yourlink">
    <img style="right:-12px" height="9" width="12" alt="external link" src="http://www.adipalaz.com/experiments/style/img/ext-link.gif" />
  </a>
</span>

お役に立てれば。

于 2013-10-17T19:46:26.543 に答える