소셜 공유 버튼을 CSS를 사용하여 인라인 블록으로 표시하는 방법은 무엇입니까?

Question

나는 내가 선호하는 인라인 블록 형식으로 현재 표시된 소셜 공유 버튼 (Facebook, Twitter, LinkedIn)이 있습니다. 그러나 모든 게시물에 대해 각각의 개별 단추에 YUI를 사용하는 방식은 실제로 CSS가 부풀려졌습니다. 나는 단순히 CSS 클래스 선택자를 사용하여이를 최적화하고 싶습니다. 현재 스타일링 프로세스는 매우 지루합니다.

각 플랫폼의 개발자 웹 사이트에서 제공하는 코드 인 HTML/JS 버튼을 사용하고 있습니다. 그러나 새로운 코드를 효과적으로 만들 수있는 선택기의 올바른 조합을 찾을 수 없었습니다. 그렇게하는 것에 도움이된다면 도움이 될 것입니다.

내 사이트는 다음과 같습니다 www.tylercharboneauprofessional.com

버튼 코드 :

<div class="fb-share-button" data-href="https://www.tylercharboneauprofessional.com/international-pulse/opinion-we-must-win-the-battle-against-climate-change" data-layout="button" data-mobile-iframe="false"> 
    <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fopinion-we-must-win-the-battle-against-climate-change&amp;src=sdkpreparse">Share</a> 
</div> 

<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script> 

각각 다음과 같이

현재 버튼 그룹 (FB, 트위터, 링크드 인은) 스타일된다 :

padding-top: 0, padding-bottom: 0/
padding-top: 12px, padding-bottom: 5px/
padding-top: 0, padding-bottom: 5px 

감사합니다.

타일러

Answer 1

아주 기본적인 예입니다. 사회 아이템을 그룹화 한 다음 그룹의 항목에 필요한 스타일을 적용합니다. 이런 식으로 다른 일반적인 스타일을 적용 할 수 있습니다.

/*Common Styling*/ 
 
.social-group>.social-item { 
 
    display: inline-block; 
 
} 
 

 
/*Facebook specific*/ 
 
.social-group>.social-item.facebook { 
 
    padding-top: 0, padding-bottom: 0 
 
} 
 

 
/*Twitter Specific*/ 
 
.social-group>.social-item.twitter { 
 
    padding-top: 12px, padding-bottom: 5px 
 
}

<div class="social-group"> 
 
    <div class="fb-share-button social-item facebook" data-href="https://www.tylercharboneauprofessional.com/international-pulse/opinion-we-must-win-the-battle-against-climate-change" data-layout="button" data-mobile-iframe="false"> 
 
    <a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fopinion-we-must-win-the-battle-against-climate-change&amp;src=sdkpreparse">Share</a> 
 
    </div> 
 

 
    <a href="https://twitter.com/share" class="twitter-share-button social-item twitter" data-show-count="false">Tweet</a> 
 
</div> 
 

 

 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
<script src="//platform.linkedin.com/in.js" type="text/javascript"> 
 
    lang: en_US 
 
</script>

당신은 당신이 일반적인 스타일을 제공하기 위해 선택 목록을 사용할 수있는 HTML을 수정에 대한 액세스를 제한합니다. 이 경우 HTML 그룹은 필요하지 않습니다. 이 - 공유 버튼를 포함하는 클래스 아무것도을 선택합니다

[class*='-share-button'] { 
    display:inline-block; 
} 

:

.fb-share-button, .twitter-share-button { 
    display:inline-block; 
} 

또는 모든 미디어 항목이 클래스는 something-share-button 같은 구조 한 경우 속성 선택기를 사용할 수

. 이 접근법은 아마도 너무 연약합니다.