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

div에있는 각 앵커 태그 다음에 어떻게 든 br 태그가 추가되었습니다. 해당 태그가 추가되는 위치를 확인하고 필요한 사항을 변경하십시오.