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

Question

我有一个外部容器，包含两个链接。它们水平对齐。第一个包含一个带有背景图像的 div，第二个只是文本。问题是整个外部容器充当第一个锚点，链接到第一个 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;
}

演示

Answer 2

这是你的新 html 结构

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

将此 css 添加到您的 css 文件中

.g-link{
   display:block;
   float:left;
 }
 .y-link{
   display:block;
  }
 .clear{
   clear:both;
   height:0px;
   width:0px;
   display:block;
}

希望这对你有用

Answer 3

在这样的内部放置一个 div 并不是一个好主意a（在 HTML5 之前的版本中无效）。但是，如果将edit-quote-buttondiv 设置为display: inline-block它会更好。然后删除 Yahoo 链接上的负上边距。