HTML - 在同一行上链接文本和图像？

Question

嘿大家我有一个奇怪的问题我认为有一个简单的解决方案，但我在这里不知所措，我已经尝试了我能想到的一切！ 我有一个包含文本和图像的链接，图像应与同一行上的文本对齐。但是，图像进入下一行，我无法找到解决方案！ 我的代码是：

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

为了使问题复杂化，我有一个JS函数，它改变了“容器”div onmouseover的背景颜色。因此，我无法对 a img 使用绝对定位，因为它会将其移动到更改颜色的区域之外。我附上了截图：

我可能会忽略一些非常小的问题，所以如果有人能提出一个很棒的修复方案！谢谢！

Answer 1

添加以下CSS规则：

#container { white-space: nowrap; }

通常，您应该发布导致问题的代码。到目前为止发布的代码肯定没有。我的猜测是你的CSS有一些设置可以设置或暗示容器上的某个特定宽度，导致换行（图像就像一个字符）。如果是这样，上面的代码解决了这个问题。

Answer 2

试试这个。 我在这里创建并测试了代码

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

编辑： 您可以删除<img>使其成为background的风格

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

添加class或id ex。 class="img"

.img1{background:url(arrow.png) no-repeat right center;padding-right:20px;line-height:10px}​

Answer 3

的 Demo 的

您好现在根据您的设计尝试此CSS

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

的 Demo 的

或

------

现在，您可以在类中定义此图像，并将此类应用于锚标记

就像这样

    .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>

Answer 4

一种方法是在图像中添加align =“right”，例如：

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

如果这不起作用。检查样式表中容器的宽度是否受限制。

Answer 5

请试试这个：

我们可以使用表格。表是这些类型对齐的方法之一。

<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>