html - 布局 anchor 、图像和 div 的正确方法

Question

我有一个外部容器，包含两个链接。它们水平对齐。第一个包含带有背景图像的 div，第二个只是文本。问题是整个外部容器充当第一个 anchor ，链接到第一个 url，而它应该不链接任何内容。这是简化的布局

<div id="links-block">          
    <a href="http://www.google.com"><div id="edit-quote-button"></div></a>
    <a href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
</div>

这是例子JSFiddle .我只是想知道如何构造这组元素，以防止出现此问题。

Answer 1

定义这个CSS

    a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line 
color: #999999;
}

Demo