내 소셜 아이콘을 CSS에 배치하십시오.

내 웹 페이지 상단에 소셜 아이콘을 추가 했으므로 지금까지 가로로 3 개를 추가 할 수 있었지만 다른 사람을 추가하거나 추가하지 않을 때는 그렇지 않았습니다. 내 코드에서 실수가 있다면, 감사합니다내 소셜 아이콘을 CSS에 배치하십시오.

CSS;

#social { 
top:18px; 
left:15px; 
height:32px; 
width:500px; 
position:absolute; 
z-index:2; 
} 

.facebook { 
background-image:url(../img/64_x_64px/facebook_dark.png); 
height:32px; 
width:32px; 
background-size:32px; 
display:inline-block; 
} 
.facebook:hover { 
background-image:url(../img/64_x_64px/facebook_active.png); 
} 
.twitter { 
background-image:url(../img/64_x_64px/twitter_dark.png); 
height:32px; 
width:32px; 
background-size:32px; 
display:inline-block; 
} 
.twitter:hover { 
background-image:url(../img/64_x_64px/twitter_active.png); 
} 
.in { 
background-image:url(../img/64_x_64px/in_dark.png); 
height:32px; 
width:32px; 
background-size:32px; 
display:inline-block; 
} 
.in:hover { 
background-image:url(../img/64_x_64px/in_active.png); 
} 
.youtube { 
background-image:url(../img/64_x_64px/youtube_dark.png); 
height:32px; 
width:32px; 
background-size:32px; 
display:inline-block; 
} 
.youtube:hover { 
background-image:url(../img/64_x_64px/youtube_active.png); 
}

HTML;

<body> 
<div id="social"> 
<div class="facebook"></div> 
<div class="twitter"></div> 
<div class="in"></div> 
<div class="youtube"></div> 
</div> 
<div id="logo"> 
</div> 
<div id="bar"> 
</div> 
<div id="middle"> 
</div> 
</body> 
</html>

귀하의 도움에 감사드립니다!

출처

2014-01-27 user3241684

너의 너비와 관련이 있다고 생각한다. 500px, 어쩌면 마지막 소셜 아이콘이 그 한도를 초과했다. –

Seconding @ TheMiniJohn – itamar

세 번째 @TheMiniJohn – disinfor

잘 작동하는 것 같습니다.

내가 버튼에 다음 태그를 추가이 JSFiddle

를 살펴 보자 :

float:left;

하지만 전에도, 브라우저에 확인 작업을했다. 아마도 네 번째 이미지가 누락 되었습니까?

희망이 도움이됩니다.

출처

2014-01-27 19:03:57 Yani

감사하지만이 didnt 일 – user3241684

내 소셜 아이콘을 CSS에 배치하십시오.

답변

관련 문제