-1

您能否通过以下链接查看我的网站，让我知道为什么链接标签会更改对齐方式？在添加链接标签之前，所有图像都水平和垂直对齐，但现在第二个图像看起来对齐更低！

链接在这里

这是代码：

enter code here
<!-- wrapper -->
<div class="wrapper">
<!-- content -->
<div class="clearfix" id="items">
<a href="http://ghazalphoto.com/?page_id=285">
<div class="boxlist">
<img class="aligncenter size-full wp-image-253" alt="imgPortf_1" src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_1.jpg" />
<h2>Love</h2>
</div>
</a>
<a href="http://ghazalphoto.com/?page_id=285">
<div class="boxlist">
<img class="aligncenter size-full wp-image-258" alt="imgPortf_2"    src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_2.jpg" />
<h2>Beauty</h2>
</div>
</a>
<a href="http://ghazalphoto.com/?page_id=186">
<div class="boxlist">
<img class="aligncenter size-full wp-image-259" alt="imgPortf_3"  src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_4.jpg" />
<h2>Fun</h2>
</div>
</a>
<a href="http://ghazalphoto.com/?page_id=290">
<div class="boxlist">
<img class="aligncenter size-full wp-image-259" alt="imgPortf_3" src="http://ghazalphoto.com/wp-content/uploads/2013/01/imgWedd_3.jpg" />
<h2>Favorite</h2>
</div>
</a>
</div>
<!-- End of content -->
</div>
<!-- End of wrapper -->
4

1 回答 1

3

问题是由p标签的放置引起的。

<p><a href="http://ghazalphoto.com/?page_id=276"></a><br>
<a href="http://ghazalphoto.com/?page_id=292"></a></p>

如果删除它，则对齐是正确的。您也可以将其移动到包装器 div 之后以解决问题...

<div class="wrapper">
    <p><a href="http://ghazalphoto.com/?page_id=276"></a><br>
    <a href="http://ghazalphoto.com/?page_id=292"></a></p>
    ...

更新

从技术上讲，您确实有p标签，因为您在 HTML 中犯了一个小错误......

<a href="http://ghazalphoto.com/?page_id=276"></p>

在这一行，您关闭了一个p标签，即使您从未打开过标签，所以浏览器试图猜测您的意思。

如果您在 Firebug 中检查（在 Firefox 中），您会看到这将链接包装在一个段落中 - 因此您可以看到拼写错误的效果。

于 2013-01-30T21:44:49.140 回答