Question

我希望在右上角或左上角有一个带标题文字和关闭按钮的标签。我怎样才能做到这一点？

图片澄清

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

这是我到目前为止所尝试的......

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

使用以下CSS

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

目前发生的情况：按钮按下文本，标签变大，这是因为输入和链接不重叠。

Answer 1

您应该按下按钮position:absolute

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

绝对定位的元素从流中取出因此在放置其他元素时不占用空间。（第here条）

现在你的按钮不会按下你的文字

Answer 2

看一看it

这是您需要的代码：

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

带有关闭按钮的Html选项卡

2 个答案: