Question

我已经完成了这一百万次，但我无法弄清楚为什么现在这不起作用。我试图让4张相同尺寸的图像水平直线放置，但它们彼此略微呈对角线。

这是我的HTML

<div class="homepage_images">
<a href="http://one-event.org.uk/the-event/activities/for-18s-under/"><img src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg" alt="" width="300" height="228" class="alignnone size-full wp-image-182" /></a>
<a href="http://one-event.org.uk/the-event/activities/"><img src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-181" /></a>
<a href="http://one-event.org.uk/the-event/streams/"><img src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-184" /></a>
<a href="http://one-event.org.uk/the-event/speakers/"><img src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-183" /></a>
</div>

我的CSS：

.homepage_images {
display:block;
}
.homepage_images img{
display:inline-block;
float:left;
width:240px;
opacity:0.8;
}

这是一个指向该网站的链接，未对齐的图像位于页面底部附近 http://www.one-event.org.uk

Answer 1

每行之间都有换行符。您没有将它放在您发布的代码中，而是放在网站的代码中，

<div class="homepage_images">
<a href="http://one-event.org.uk/the-event/activities/for-18s-under/">
<img class="alignnone size-full wp-image-182" width="300" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg">
</a>
<br>
<a href="http://one-event.org.uk/the-event/activities/">
<br>
<a href="http://one-event.org.uk/the-event/streams/">
<br>
<a href="http://one-event.org.uk/the-event/speakers/">
</div>

每个div之间都有换行符。删除它可以解决问题。

基本上将其更改为您发布的内容;

<div class="homepage_images">
<a href="http://one-event.org.uk/the-event/activities/for-18s-under/"><img width="300" class="alignnone size-full wp-image-182" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg"></a>
<a href="http://one-event.org.uk/the-event/activities/"><img width="300" class="alignnone size-full wp-image-181" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg"></a>
<a href="http://one-event.org.uk/the-event/streams/"><img width="300" class="alignnone size-full wp-image-184" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg"></a>
<a href="http://one-event.org.uk/the-event/speakers/"><img width="300" class="alignnone size-full wp-image-183" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg"></a>
</div>

Answer 2

以某种方式在该div中的每个锚标记之后添加了br标记。只需检查标签的添加位置并进行必要的更改。

CSS内嵌块图像不会水平对齐

2 个答案: