jquery 바운스 효과가 부동 요소와 함께 작동하지 않습니다.

Question

왼쪽으로 떠있는 링크가있는을 사용하고 있습니다. 그런 다음 클릭시 요소에 바운스 효과를 줄 때 클릭하면 바운스가 발생하지만 컨테이너의 오른쪽으로 바뀝니다.

왼쪽 효과를 제거하면 현상이 발생하지 않습니다. 나는 float 속성의 대체물을 찾으려고했지만 적절한 효과를 찾을 수 없습니다. 이 내 HTML 코드

<div id="menu"> 
     <ul> 
     <li><asp:LinkButton ID="lbDashboard" ClientIDMode="Static" runat="server" onclick="lbDashboard_Click">Dashboard</asp:LinkButton></li> 
     <li><asp:LinkButton ID="lbFindHotfix" ClientIDMode="Static" runat="server" onclick="lbFindHotfix_Click">Search</asp:LinkButton></li> 
     <li><asp:LinkButton ID="lbHelpWiki" ClientIDMode="Static" runat="server" onclick="lbHelpWiki_Click">Help/Wiki</asp:LinkButton></li> 
     </ul> 
     </div> 

이며, 이것은 CSS 부분

#menu { 
padding-top:30px; 
padding-right:30px; 
margin: 0; 
float: right; 
width:100%; 
overflow:hidden; 
} 

#menu ul, #searchdropdown ul{ 
margin: 0; 
list-style: none; 
} 

#mainlinks ul 
{ 
margin: 0; 
list-style: none; 
} 
#menu li, #mainlinks li, #searchdropdown li{ 
display: inline; 
} 

#menu a{ 
display: block; 
float: left; 
padding: 10px 10px; 
margin: 0; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 14px; 
font-weight: normal; 
font-family: Georgia, "Times New Roman", Times, serif; 
color: #616B4F; 
} 


#menu a:hover{ 
background: #9FAB87; 
color: #FFFFFF; 
border-top-left-radius:1em; 
border-bottom-right-radius:1em; 
} 

입니다 이건 내 스크립트는 목록의 항목을하지 떠 때 발생하는

<script type="text/javascript" language="javascript"> 
    $(function() { 

     //Add bounce effect on Click of the DIV 
     $('#lbDashboard').click(function() { 
      $(this).effect("bounce", { times: 3 }, 300); 
     }); 

     $('#lbFindHotfix').click(function() { 
      $(this).effect("bounce", { times: 3 }, 300); 
     }); 

     $('#lbHelpWiki').click(function() { 
      $(this).effect("bounce", { times: 3 }, 300); 
     }); 

    }); 

</script> 

Answer 1

을 코드 -이다 링크를 클릭하고 링크에서 바운스를 수행합니까? 유사한 문제를 찾고 다른 사람을 위해

#menu li, #mainlinks li, #searchdropdown li{ 
display: inline; 
} 

#menu li { 
float: left; 
padding: 10px 10px; 
} 

#menu a{ 
margin: 0; 
text-align: center; 
text-decoration: none; 
text-transform: uppercase; 
font-size: 14px; 
font-weight: normal; 
font-family: Georgia, "Times New Roman", Times, serif; 
color: #616B4F; 
} 

Answer 2

는 :

I는 다음과 같이했다 :

<div> 
    <a href="#"> 
    link 
    </a> 
    <div style="float:right;"> 
    Controls 
    </div> 
</div> 

을 그리고 특정 이벤트 후 몇 시간을 반송 할 수있는 링크를 원했다. 하지만 그렇게했을 때 다른 내부 div의 표시가 엉망이되었습니다.

나는 반대편에 플로트를 전환, 지금은 작동합니다 : 당신이 설명하고 무엇을 경험하고 있지 않다

<div> 
    <a href="#" style="float:left;"> 
    link 
    </a> 
    <div> 
    Controls 
    </div> 
</div>