将元素与HTML表格单元格的底部对齐 [英] Align element to bottom of HTML Table Cell

问题描述

我在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;
}

没有效果。

我在 JSFiddle

我需要怎么做才能使输入框和按钮与单元格的底部对齐？

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表格单元格的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！