html - Html Tab with a Close Button

Question

I want to have a tab with the title text and a closing button in either the top right or left corner. How can I achieve this?

Picture for clarification

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

Here is what I have tried so far...

<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>

With the following CSS

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

Currently what happens: The button pushes down the text and tab gets big, this happens because the input and the link do not overlap.

Answer 1

你应该给你的按钮 position:absolute

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

绝对定位的元素会从流中取出，因此在放置其他元素时不会占用空间。（文章在这里）

现在您的按钮不会将您的文字向下推

Answer 2

看看并玩它

这是您需要的代码：

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