0

タイトル テキストを含むタブと、右上隅または左上隅に閉じるボタンが必要です。どうすればこれを達成できますか？

説明のための写真

=============================
| 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");   
}

現在何が起こっているか: ボタンがテキストを押し下げ、タブが大きくなります。これは、入力とリンクが重ならないために発生します。

4

2 に答える 2

1

あなたはあなたのボタンを与えるべきです position:absolute

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

絶対配置された要素はフローから除外されるため、他の要素を配置するときにスペースを占有しません。（記事はこちら）

これで、ボタンがテキストを押し下げることはありません

于 2013-07-18T22:17:24.807 に答える
0

見て、それで遊んでください

これはあなたが必要とするコードです:

$('.text').before().click(function(){
$('.text').fadeOut('fast');
});
于 2013-07-18T21:41:40.480 に答える