CSS內聯塊圖像不會水平對齊

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

不知何故br標籤添加在該div中的每個錨標記之後。只需檢查標籤添加的位置並進行必要的更改即可。