2011-11-10 3 views
1

내 웹 페이지에서 다음 코드를 사용하고 있는데 어떻게하면 송신 버튼 콘텐츠가 잘리지 않을지 궁금합니다. 여기 페이 스북 (Facebook) 보내기 버튼 내용이 잘림 보내기

<div id="share_buttons_wrapper"> 
    <h4 style="text-align:center;">Share</h4> 
    <div id="share_buttons_single_page"> 
     <div class="wdt_button"> 
      <g:plusone size="tall" href="https://mailincard.mysite.com"></g:plusone> 
     </div> 
     <div class="wdt_button"> 
      <script src="https:////platform.twitter.com/widgets.js" type="text/javascript"></script> 
      <div> 
       <a href="https://twitter.com/share" class="twitter-share-button" 
        data-url="https://mailincard.mysite.com" 
        data-text="I just filled in my card online" 
        data-count="vertical">Tweet</a> 
      </div> 
     </div> 
     <div class="wdt_button"> 
      <div class="fb-like" data-href="https://mailincard.mysite.com" data-send="true" data-layout="box_count" data-width="450" data-show-faces="true" data-font="tahoma"></div> 
     </div> 
    </div> 


</div> 

<script type="text/javascript"> 
      (function() { 
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
       po.src = 'https://apis.google.com/js/plusone.js'; 
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
      })(); 
     </script> 



<div id="fb-root"></div> 
<script>(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "https://connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 

여기에 CSS를

#share_buttons_wrapper 
{ 
top:5px; 
left:850px; 
position: absolute; 
margin-left:5px; 
width: 86px; 
background-color: #eee; 
padding-top:2px; 
background-color : #EEE; 
border: 1px solid #CCC; 

} 
#share_buttons_single_page{ 
background-color: #eee; 
} 

#share_buttons_single_page .wdt_button{ 
    clear:left; 
    padding: 7px 0px 0px 16px; 
    border-top: 1px solid #CCC; 
    height:75px; 
} 

입니다 그리고 여기에 스크린 샷을처럼 공유 콘텐츠 DIV 코드가 어떻게 표시되는지를 보여줍니다

enter image description here

+0

이 HTML에 대한 CSS를 추가 할 수 있습니까? 특히 #share_buttons_single_page – Yisela

+0

확실! 나는 그 일을 계속하겠습니다. – zSynopsis

+2

오버플로 시도 : 표시 –

답변

2

당신은 사용해 볼 수 있습니다 overflow:visible

0

Like 버튼 플라이 아웃이 잘리는 것과 비슷한 문제가있었습니다. 그런 다음 솔루션을 찾았 으면 fly-out이 검색 입력 필드 아래 부분적으로 덮였습니다. 여기에 CSS를 수정 (나는 스팬의 내부에 Likebox가 있음). 또한 Like 버튼의 위치는 까다 롭습니다. 그 옆에 트윗 버튼이 있기 때문에 위/왼쪽 CSS가 트릭을했기 때문입니다.

.fb-like span { 
/* http://wordpress.org/support/topic/facebook-like-button-flyout-getting-cut-off */ 
overflow: visible !important; 
width:450px !important; 
margin-right: -375px; 
/* my additions */ 
z-index: 1000; 
position: relative; 
top: -4px; 
left: -26px; 
} 

나는 이것이 누군가를 돕기를 바란다. 나는 그것에 2-3 시간을 보냈다. 의견에 감사드립니다.

관련 문제