3

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

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

为了使问题复杂化，我有一个 JS 函数，它改变了“容器”div onmouseover 的背景颜色。因此我不能对a img使用绝对定位，因为它会将它移到改变颜色的区域之外。我已经包括了一个截图：

在此处输入图像描述

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

4

5 回答 5

4

添加以下 CSS 规则：

#container { white-space: nowrap; }

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

于 2012-11-22T06:25:39.323 回答
2

一种方法是向图像添加 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>make itbackground

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

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

.img1{background:url(arrow.png) no-repeat right center;padding-right:20px;line-height:10px}​
于 2012-11-22T04:05:20.230 回答
-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 回答