垂直對齊底部的HTML表格和浮點右邊的元素

我知道這個問題已被要求死亡，但我找不到類似這樣的情況。我有一個HTML表格，「th」行的文本通過vertical-align：bottom沿着底部對齊。現在，其中一個標題還包含一個我想要浮動到右側和底部的按鈕。所以當然，我用「float：right」在一個「span」中包裝了這個按鈕。但是該列中標題的文本不再觸及容器的底部。垂直對齊底部的HTML表格和浮點右邊的元素

這裏舉例： http://jsfiddle.net/accelerate/3sqyw/

的HTML：

<table> 
    <th>Col 1</th> 
    <th>Col 2<span class="right-float"><button>Button</button></span></th> 
    <th>Col 3</th> 
</table>

的CSS：

.right-float { 
    display: inline-block; 
    float: right; 
} 

table, th { 
    border: 1px solid #aaaaaa; 
} 

table th { 
    text-align: left; 
    vertical-align: bottom; 
    width: 120px; 
    height: 40px; 
    padding: 0 10px; 
}

如果我刪除「浮動：權利」，在「西2」將調整正確的底部，但當然，按鈕不再是右對齊。那麼我需要做些什麼來確保Col 2沿着底部與其餘列對齊？

來源

2013-12-12 accelerate

使用定位而不是浮動。

.right-float { 
    position:absolute; 
    bottom:0; 
    right:0; 
}

（在 <th> position:relative;）

並設置相對定位於表頭。

jsFiddle example

來源

2013-12-12 02:27:35 j08691

完美，這正是我所需要的！ – accelerate

我剛剛意識到這隻適用於Chrome和IE，但不適用於FireFox或Safari。在Firefox中，該按鈕位於瀏覽器窗口的最右下角。 – accelerate

好的，我解決了這個問題。基本上，將「th」設置爲相對在Firefox中不起作用，但是將該「th」的全部內容封裝在div位置：relative將適用於所有瀏覽器 – accelerate

嘗試調整按鈕的height，你會發現，標籤也是調整。

.right-float 
{ 
    display: inline-table; 
    float: right; 
    height: 20px; 
}

來源

2013-12-12 02:58:09 Stuart

垂直對齊底部的HTML表格和浮點右邊的元素

回答

相關問題