3

こんにちは、私は奇妙な問題を抱えていますが、これには簡単な解決策があると思いますが、ここで途方に暮れています。考えられることはすべて試しました! テキストと画像を含むリンクがあり、画像は同じ行のテキストと揃える必要があります。ただし、画像は次の行に移動し、これに対する修正が見つかりません! 私のコードは次のとおりです。

<div id="container" style="padding: 5px">
  <a href="page.php">Username<img src="arrow.png"></a>
</div>

問題を複雑にするために、マウスオーバーで「コンテナ」divの背景色を変更するJS関数があります。したがって、色が変わる領域の外に移動するため、 a imgに絶対配置を使用できません。スクリーンショットを含めました：

ここに画像の説明を入力

私はおそらくいくつかの非常に小さな問題を見落としているので、誰かが修正を提案できれば素晴らしいでしょう! ありがとう！

4

5 に答える 5

4

次の CSS ルールを追加します。

#container { white-space: nowrap; }

通常、問題の原因となっているコードを投稿する必要があります。これまでに投稿されたコードは確かにそうではありません。私の推測では、CSS にはコンテナに特定の幅を設定または暗示する設定があり、行の折り返し (画像が文字のように振る舞う) が発生していると思われます。その場合、上記のコードは問題を修正します。

于 2012-11-22T06:25:39.323 に答える
2

1 つの方法は、次のように画像に align="right" を追加することです。

<img align="right" src="arrow.png">

それがうまくいかない場合。スタイルシートによってコンテナの幅が制限されていないか確認してください。

于 2012-11-22T04:09:11.107 に答える
1

デモ

こんにちは、あなたのデザインに従ってこのCSSを試してください

#container a{
display:inline-block;
  vertical-align:top;
}
img{
vertical-align:top;
}

デモ

また

------

これで、この画像をクラスで定義し、このクラスをアンカー タグに適用できます。

このように

    .imgclass{
    background:url("your_image_path.png") no-repeat 0 0;  // set to the background-position Acroding to your background Image
display:inline-block;
vertical-align:top;
    }

HTML

<div id="container" style="padding: 5px">
  <a href="page.php" class="imgclass">Username</a>
</div>
于 2012-11-22T04:08:02.660 に答える
1

これを試してください。ここでコードを作成してテストしました

[http://jsfiddle.net/yaSWM/7/]

編集済み：あなたのスタイルで<img>メイクを削除できますbackground

<div id="container" style="padding: 5px">
  <a class="img1" href="page.php">username</a>
</div>

クラスまたは ID を追加します。class="img"

.img1{background:url(arrow.png) no-repeat right center;padding-right:20px;line-height:10px}​
于 2012-11-22T04:05:20.230 に答える
-1

これを試してください：

テーブルを使用する場合があります。テーブルは、これらのタイプの配置の方法の1つです。

<div id="container" style="padding: 5px">
  <a href="page.php"><table><tr><td>Username</td><td><img src="arrow.png"></td></tr></table></a>
</div>
于 2012-11-22T04:40:10.613 に答える