问题描述
我在HTML表的单元格中有多个元素。我希望某些元素与单元格的底部对齐,而另一些元素与顶部的单元格对齐。我在使元素与底部对齐方面遇到麻烦。我的表格是:
I have multiple elements in a cell of an HTML table. I want some of the elements to be aligned to the bottom of the cell and some to be aligned at the top. I am having trouble getting the elements to align to the bottom. My table is:
<tr>
<td style="background-color: #007CE2">
<p id="t1_list">test<br>another<br>testing</p>
<input type="text" name="t1_input" id="t1_input">
<button>
Add
</button>
</td>
<td style="background-color: #E54040">
<p id="t2_list"></p>
<div class="value_input2">
<input type="text" name="t2_input" id="t2_input">
<button>
Add
</button>
</div>
</td>
</tr>
但是div中的元素似乎想保持居中,而不是停留在底部。到目前为止,我已经使用CSS尝试了两种不同的方法:
However the elements within the div seem to want to stay centered in the cell, rather than stay at the bottom. I have tried two different methods so far with CSS:
div.value_input {
position: absolute;
bottom: 0;
}
只是将div移到页面底部。并且:
which just takes the div down to the bottom of the page. And:
div.value_input2 {
display: table-cell;
vertical-align: bottom;
}
没有效果。
我在
我需要怎么做才能使输入框和按钮与单元格的底部对齐?
What do I need to do to get the input box and button to align to the bottom of the cell?
推荐答案
您需要将父元素位置设置为相对 position:relative
才能使用绝对定位。这是一个有效的代码段。
You need to set the parent elements position to relative position:relative
in order to use absolute positioning. Here is a working snippet.
table {
border-collapse: collapse;
}
table, th, td {
border: 2px solid black;
position:relative;
}
div.value_input {
position: absolute;
bottom: 0;
}
div.value_input2 {
position:absolute;
bottom:0;
}
<table>
<tr>
<th style="background-color: #007CE2">
Test
</th>
<th style="background-color: #E54040">
Test
</th>
</tr>
<tr>
<td style="background-color: #007CE2">
<p id="t1_list">test<br>another<br>testing</p>
<input type="text" name="t1_input" id="t1_input">
<button>
Add
</button>
</td>
<td style="background-color: #E54040">
<p id="t2_list"></p>
<div class="value_input2">
<input type="text" name="t2_input" id="t2_input">
<button>
Add
</button>
</div>
</td>
</tr>
<tr>
<th style="background-color: #8BC34A">
Test
</th>
<th style="background-color: #FF9800">
Test
</th>
</tr>
<tr>
<td style="background-color: #8BC34A">
<p id="t3_list"></p>
<input type="text" name="t3_input" id="t3_input">
<button>
Add
</button>
</td>
<td style="background-color: #FF9800">
<p id="t4_list"></p>
<input type="text" name="t4_input" id="t4_input">
<button>
Add
</button>
</td>
</tr>
</table>
这篇关于将元素与HTML表格单元格的底部对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!