如何在文本框中間放置超鏈接？

我想垂直放置一個超鏈接，所以它的文本框的高度中間，但它不適合我。如何在文本框中間放置超鏈接？

這裏是jsfiddle的例子。我想這樣做，而不使用Javascript，在IE6 +中工作，這兩個元素需要在同一個td列中，而不使用硬編碼像素，而超鏈接恰好在文本框的右邊緣旁邊（就像它顯示的那樣這個例子，只是將它向上移動到黃色框的中間）。

2012-01-27 Tony_Henrich

你爲什麼使用表格？ – 2012-01-27 22:47:22

@Abhijeet它是表單的一部分。 – 2012-01-27 22:52:06

「這兩個元素需要在同一個td中」......除非我們被允許嵌套另一個表或導入一個大的強大的CSS框架（比如twitter引導程序），那麼你就是在努力工作。 – perfectionist 2012-01-27 22:54:08

只要textarea和一個元素是內聯元素，他們將共享他們的基線。如果浮動的元素，你可以設置一個元素的行高匹配textarea的高度：

textarea { float :left; } 
a { float: left; line-height: 6em; }

演示：http://jsfiddle.net/Guffa/aLtXA/6/

來源

2012-01-27 22:50:55 Guffa

有沒有使用硬編碼值的方法？ 6em。 – 2012-01-27 22:55:49

@Tony_Henrich：好吧，不容易。該值基於textarea中的行數，另外還有一些用於填充，邊框和邊距。您可以使用另一個表格，以便您可以使用垂直居中，但表格的行爲很難預測，因此我在佈局中避免它們。 – Guffa 2012-01-27 23:10:09

好吧，如果你是願意窩表，這將工作：

<table> 
    <tr style="vertical-align:top"> 
    <td> 
     <table> 
     <tr style="width: 500px;"> 
      <td> 
      <textarea cols="45" rows="5"></textarea> 
      </td> 
      <td style="background-color:yellow; vertical-align:middle"> 
      <a href="">Edit</a> 
      </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     second cell 
    </td> 
    </tr> 
</table>

但我討厭這個級別嵌套的地獄。它導致瘋狂和灰白的頭髮。

我希望有人會發佈一個更好的答案。是否有可能也許與twitter bootstrap?

來源

2012-01-28 00:02:36 perfectionist

「將工作」 - 在鉻。我沒有測試過多個瀏覽器，而且def。不是IE6。 – perfectionist 2012-01-28 00:03:20

在這裏你去：http://jsfiddle.net/aLtXA/16/

我把垂直對齊：中間的文本框和錨。同樣，我從表格單元中刪除了垂直對齊。

來源

2012-01-28 16:27:17 Matthew

好奇，如果這在IE6中工作。可以？ – Matthew 2012-02-01 03:06:53