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

<强> Demo

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

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

布局锚点，图像和div的正确方法

3 个答案: