HTML 페이지에서 서로 옆에 이미지가 나타나지 않음

디스플레이 (인라인 블록 포함) 옆에 이미지가 나타나지 않을 수 있습니다. 어떻게해야합니까?HTML 페이지에서 서로 옆에 이미지가 나타나지 않음

HTML & CSS 코드 :

.emb-web-links { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 30px; 
 
    padding-right: 20px; 
 
} 
 
.icons { 
 
    display: inline-block; 
 
}

<div class="emb-web-links" style="width: 26px;display:inline-block"> 
 
    <a style="text-decoration:  underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://www.facebook.com/ifarmaciascom/?fref=ts" class="icons"> 
 
    <img style="border: 0;" src="https://i8.createsend1.com/static/eb/master/13-the-blueprint-3/images/facebook.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://twitter.com/ifarmaciaspt" class="icons"> 
 
    <img style="border: 0;" src="https://i9.createsend1.com/static/eb/master/13-the-blueprint-3/images/twitter.png" target="balnk" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://vimeo.com/user22709514/videos/"> 
 
    <img style="border: 0;" src="https://i10.createsend1.com/static/eb/master/13-the-blueprint-3/images/youtube.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://pt.linkedin.com/company/ifarmacias-com" target="_blank"> 
 
    <img style="border: 0;" src="https://i3.createsend1.com/static/eb/master/13-the-blueprint-3/images/linkedin.png" width="26" height="26" /> 
 
    </a> 
 
</div>

출처

2016-06-22 Laura Diaz

안녕 환영을 제거뿐만 아니라 제목 – DaniP

아마도 때문에 더 명확하게하기에 부모는 26px로 제한됩니까? – Utkanos

실수로 코드를 읽었을 때, 나는 절대적인 위치를 알 수 있었고 부모와는 달리 아이콘이 있다고 생각합니다. 죄송합니다. –

SO ... 질문 자체에 대한 자세한 질문을 보내 주시기 바랍니다에 인라인 CSS 폭

.emb-web-links { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    padding-right: 20px; 
 
} 
 
.icons { 
 
    display: inline-block; 
 
}

<div class="emb-web-links"> 
 
    <a style="text-decoration:  underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://www.facebook.com/ifarmaciascom/?fref=ts" class="icons"> 
 
    <img style="border: 0;" src="https://i8.createsend1.com/static/eb/master/13-the-blueprint-3/images/facebook.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://twitter.com/ifarmaciaspt" class="icons"> 
 
    <img style="border: 0;" src="https://i9.createsend1.com/static/eb/master/13-the-blueprint-3/images/twitter.png" target="balnk" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://vimeo.com/user22709514/videos/"> 
 
    <img style="border: 0;" src="https://i10.createsend1.com/static/eb/master/13-the-blueprint-3/images/youtube.png" target="_blank" width="26" height="26" /> 
 
    </a> 
 

 
    <a style="text-decoration: underline;transition: opacity 0.1s ease-in;color: #fff;" href="https://pt.linkedin.com/company/ifarmacias-com" target="_blank"> 
 
    <img style="border: 0;" src="https://i3.createsend1.com/static/eb/master/13-the-blueprint-3/images/linkedin.png" width="26" height="26" /> 
 
    </a> 
 
</div>

출처

2016-06-22 14:23:39

정말 고마워요! 그것은 효과가 있었다. –

이 .emb-web-links에서 인라인 스타일 width: 26px;를 제거합니다.

아이콘이 정렬 할 수있는 너비/영역을 제한하고 있습니다.

인라인 CSS 스타일을 사용하지 않는 것이 좋습니다. 비록이 코드가 최종적이 아니며 결국 인라인 CSS를 관련 .emb-web-links 및 .icons 클래스로 옮길 것이라고 가정합니다.

출처

2016-06-22 14:23:06 hungerstar

HTML 페이지에서 서로 옆에 이미지가 나타나지 않음

답변

관련 문제