Question

我在HTML表格的单元格中有多个元素。我希望一些元素与单元格底部对齐，一些元素在顶部对齐。我无法让元素与底部对齐。我的表是：

    <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中的元素似乎想要保持在单元格的中心，而不是留在底部。到目前为止，我已经尝试了两种不同的方法：

div.value_input {
    position: absolute;
    bottom: 0;
}

将div降低到页面底部。和

div.value_input2 {
    display: table-cell;
    vertical-align: bottom;
}

哪个没有效果。

我在JSFiddle

中有代码

我需要做什么才能让输入框和按钮对齐到单元格的底部？

Answer 1

您需要将父元素位置设置为相对<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnChartDiv"></div>才能使用绝对定位。这是一个工作片段。

position:relative

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

Answer 2

您需要height:somepx才能进行垂直对齐。

Answer 3

使表格单元格位置：相对，然后你可以再次在div上尝试position：absolute ...

table tr td {
  position: relative;
}

div.value_input2 {
  position: absolute;
  bottom: 0;
}

fiddle

将元素与HTML表格单元格的底部对齐

3 个答案: