Question

我正在尝试定位以下项目，但不能完全正确。

她是理想的结果：

| Blah Bah（img）Link |

图像对齐左侧H3的右侧，链接位于最右侧。一切都在同一条线上。

    <div style="float:left;"><h3>Blah Bah</h3></div>
      <a href="#"><img src="image\edit.png" /></a>
    <div style="float:right;">Link</div>

<html>
<style>
    h3
    {
        color: #0066CC;
        font-size: 130%;
        font-weight: bolder;
        padding-top: 0px;
        margin: 0px;
    }
</style>
<body>
    <div style="float: left;"><h3>Blah Bah</h3></div>
    &nbsp;<a href="#" style="padding-top: 25px;"><img src="go.gif" style="padding-top: 2px;" /></a>
    <div style="float: right;">Link</div>
</body>
</html>

Answer 1

默认h3标签有margin-top和margin-bottom，这就是你的元素不在同一行的原因。

您可以通过添加以下样式来更改它：

h3 {
   margin: 0;
}

但更好的方法是使用重置样式表，以便您知道所有元素都已重置。 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

我会诚实地对你说，我已经读了很多次，我仍然无法解读这句话，所以我不知道你想要什么：

图像对齐左侧H3的右侧，链接位于最右侧。一切都在同一条线上。

我建议上传一张Photoshop图片来展示你想要的最终结果。

同时，这是我对它的抨击：

alt text

Code on jsFiddle

将图像对齐到h3的右侧

2 个答案: