表頭上的按鈕

我有一箇舊網站的問題，我需要在div元素中放置一個按鈕，但在一個表的頂部。表頭上的按鈕

<div class="panel2" style="border: 1px solid red;"> 
    <div id="charInfo"> 
     <input type="button" id="lockList" name="lockList" value="Lock WL" /> 
     <table width="500px" style="border:1px solid #000;border-collapse:collae;font-familyrif;font-size:80%;"> 
      <caption style="font-size:140%;padding:5px;">Wish list status <b>Tyde</b> 
      </caption> 
      <thead> 
       <tr> 
        <th scope="col">Zone name</th> 
        <th scope="col">Wish Items</th> 
        <th scope="col">Received</th> 
        <th scope="col">Status</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr></tr> 
       <tr> 
        <th scopre="row">Heart of Fear</th> 
        <td align="center">22</td> 
        <td align="center">0</td> 
        <td align="center" style="color:Green;"><b>Active</b> 
        </td> 
       </tr> 
       <tr> 
        <th scopre="row">Mogu-shan Vaults</th> 
        <td align="center">27</td> 
        <td align="center">4</td> 
        <td align="center" style="color:Green;"><b>Active</b> 
        </td> 
       </tr> 
       <tr> 
        <th scopre="row">Throne of Thunder</th> 
        <td align="center">45</td> 
        <td align="center">0</td> 
        <td align="center" style="color:Green;"><b>Active</b> 
        </td> 
       </tr> 
       <tr> 
        <th scopre="row">Throne of Thunder (Heroic)</th> 
        <td align="center">5</td> 
        <td align="center">1</td> 
        <td align="center" style="color:Red;"><b>Not locked</b> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> </div>

我這裏有http://jsfiddle.net/TvwKz/

一個例子正如你可以看到按鈕被放置到正確的，但我想把它放在桌子上的標題上。它可以完成，如果是的話如何？
這是笏我想
http://www.odinsoft.dk/download/Table.jpg

來源

2013-07-25 Tyde

使用'位置：absolute'與'左鍵：450px'。對於'＃charInfo'，使用'position：relative'。 [Jsfiddle]（http://jsfiddle.net/TvwKz/3/） – YD1m

不起作用。該按鈕是aligend頁面而不是div。所以當頁面改變時，按鈕不會調整。如果表格只有300像素，那麼按鈕不再在標題上。 – Tyde

另一種解決方案：在表格頂部添加無邊框行，並將按鈕放入最後一個單元格中。 – YD1m

你可以這樣

CSS

#lockList {width:auto;margin:auto;position: relative;}

HTML

<caption style="font-size:140%;padding:5px;">Wish list status <b>Tyde</b> 
      <input type="button" id="lockList" name="lockList" value="Lock WL" /> 
      </caption>

演示：http://jsfiddle.net/ypAVr/

來源

2013-07-25 10:36:28 Satpal

我不需要它在行的頂部。我需要將它顯示在文字右側網站的標題所在的位置。 – Tyde

@Tyde，我已更新回答 – Satpal

謝謝。那會做。爲什麼我之前沒有想到...... – Tyde

作爲指你提供的小提琴鏈接，從lockList刪除float:right; css類。

#lockList {width:auto;margin:auto;position: relative;}

來源

2013-07-25 10:39:31 Bharadwaj

檢查下面CSS

#lockList 
{ 

    width:auto; 
} 
#charInfo 
{ 
    position: absolute; 
    text-align: center; 
}

和小提琴demo

來源

2013-07-25 10:40:25

博頓是在右上方，因爲我以前就是這樣。所以它不在標題上。 – Tyde

@Tyde檢查更新的答案 –

表頭上的按鈕

回答

相關問題