2012-09-03 265 views
2

下面給出的HTML代碼:如何定位表格單元(td)中的元素,使一個元素左對齊,另一個右對齊?

<tr> 
    <td>Some text <a href="">Some link</a> <button>Some Button</button></td> 
</tr> 

我想實現這樣的事情:

Image of Table

我是否需要添加額外的加價,如包裝的div浮動之一左側和右側?我還需要在td內的元素垂直對齊。

什麼是以最小的附加標記達到此目的的最佳方法。

我這裏的示例代碼:http://jsfiddle.net/stormwild/AAw78/17/

一個相關的問題是如何保持文本表格單元格中是一致的對準當一個單元格包含浮動元素?

enter image description here

+0

如果我應用td button {float:right; },在IE7/IE8/IE9中,某些文本和某些鏈接向上移動,因此不會與其他表格單元格中的文本對齊。有沒有辦法避免這種轉變。 – stormwild

回答

8

CSS:td button { float: right; }

排序。

+0

在一個單元格中浮動元素的問題在於,它與其他單元格相比該單元格中的文本未對齊。 – stormwild

+0

您可以向浮動元素添加任意邊距(甚至是負邊距)以糾正任何對齊問題。 – Dai

3

嗨現在給浮動元素在你的按鈕移到

<button style="float:right;">Some Button</button> 

Demo

<button class="fr">Some button</button> 

的CSS

.fr{ 
float:right; 
} 
+0

感謝您的演示。 – stormwild