對齊跨度日和輸入的頂部同一日

的底部我使用的是用頭產生這樣對齊跨度日和輸入的頂部同一日

<th> 
<span class="xxx">header title</span> 
<span class="sort_icon"/> 
<input text (optional, depending on column definition for filtering) class="yyy"> 
</th>

表，我想做些什麼庫與純CSS使頭標題並將圖標對齊排列到第th個元素的頂部，並且輸入元素（如果存在）到第n個元素的底部。

我的問題是，垂直對齊可以設置爲僅個元素，從而使這兩個範圍和投入去頂部或底部，但我不能想出一個辦法來對齊differenty跨度和輸入

來源

2016-11-09 Nadir

通常在這種情況很容易使用絕對定位：

<style type="text/css"> 
.th 
{ 
position:relative; 
} 

.xxx 
{ 
position:absolute; 
top:0px; 
left:0px; 
} 


.yyy 
{ 
position:absolute; 
bottom:0px; 
left:0px; 
} 
</style>

唯一的缺點是，你必須確保次的高度足以以適應排序圖標。這很容易 - 只需設置一個高度和任何必要的保證金/填充，或在上。

來源

2016-11-09 14:09:52 raphael75

固定位置是一個選項，但由於不知道標題中有多少內容，因此很難將輸入框保留在底部。它可能在2行上，其他的在1上。

您可能會嘗試類似下面的示例。 span標籤不是塊元素，因此您不能輕鬆移動。因此，使用display：block，然後使用邊距和填充。

PS：更好地利用CSS文件...內嵌樣式是隻是舉例

<table> 
 
<tbody><tr> 
 
<th style=" 
 
    max-height: 100px; 
 
    background-color: red; 
 
    vertical-align: top; 
 
"> 
 
<span class="xxx" style=" 
 
    display: block; 
 
">header title</span> 
 
<span class="sort_icon" style=" 
 
    display: block; 
 
    margin-top: 200; 
 
"> 
 
<input text="" (optional,="" depending="" on="" column="" definition="" for="" filtering)="" class="yyy"> 
 
</span></th> 
 
</tr> 
 

 
</tbody></table>

來源

2016-11-09 14:35:28 Thor

對齊跨度日和輸入的頂部同一日

回答

相關問題