닫기 버튼이있는 Html 탭

Question

제목 텍스트가있는 탭과 오른쪽 상단이나 왼쪽 모서리의 닫기 버튼이 필요합니다. 이것을 어떻게 할 수 있습니까? 버튼은 밀어 : 설명

여기

============================= 
| X       | 
|       | 
|   Text Here!  | 
============================= 

에 대한

이

그림

.close_tab_button { 
    background-image:url("/messaging-center/resources/images/close_button.gif"); 
} 

이 현재 어떤 일이 다음과 같은 CSS와

<li class="tabLi ui-state-default ui-corner-top "> 
      <div> 
       <input type="button" name="close_tab" class="close_tab_button"/> 
       <a href="<c:url value="/ex.url"></c:url>" 
       title="Test"> "Text Here!"</a> 
      </div> 
</li> 

... 내가 지금까지 시도한 것입니다 텍스트 및 탭 아래로 큰, 입력 및 링크가 겹치지 않기 때문에 발생합니다.

Answer 1

당신은 position:absolute

.close_tab_button { 
    background-image:url("/messaging-center/resources/images/close_button.gif"); 
    position:absolute; 
    top: 5px; 
    left:5px; 
} 

당신의 버튼을 절대적 위치의 요소를 제공해야 이 흐름에서 꺼내어 은 더 이상 배치 할 때 공간을 차지하지 않습니다. r 요소. (제 here)

는 이제 버튼 텍스트를 아래로

Answer 2

를 살펴보고 it

놀이입니다 코드는 당신이 필요합니다

$('.text').before().click(function(){ 
$('.text').fadeOut('fast'); 
});