Question

我正在使用一个库来生成带有这样的标题的表

<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个元素的顶部，输入元素如果存在于元素的底部。

我的问题是vertical-align只能设置为th元素，因此可以使跨度和输入都在顶部或底部，但我无法找到一种方法来对齐不同的跨度和输入

Answer 1

通常在这种情况下，使用绝对定位更容易：

  public class Veg extends Fragment{

public Veg() {
}



public static Veg newInstance(String param1, String param2) {
    Veg fragment = new Veg();
    Bundle args = new Bundle();
    args.putString(ARG_PARAM1, param1);
    args.putString(ARG_PARAM2, param2);
    fragment.setArguments(args);
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        mParam1 = getArguments().getString(ARG_PARAM1);
        mParam2 = getArguments().getString(ARG_PARAM2);
    }
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

唯一的缺点是你必须确保th的高度足以容纳排序图标。这很简单 - 只需设置一个高度和任何必要的边距/填充，或者在第二个。

Answer 2

Fixid位置是一个选项，但由于您不知道标题中有多少内容，因此很难将输入框保留在底部。它可能会在2行上，而其他在1行上。

您可以尝试以下示例中的内容。 span标签不是块元素，因此您无法轻松移动。因此，使用display：block然后使用边距和填充。

PS：更好地使用css文件...内联样式只是例如

＆＃13;

<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>

＆＃13;

将span对齐到th的顶部并输入到同一th的底部

2 个答案: