对齐跨度日和输入的顶部同一日

的底部我使用的是用头产生这样对齐跨度日和输入的顶部同一日

<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

对齐跨度日和输入的顶部同一日

回答

相关问题