时间戳

首页 > 解决方案 > 容器中的 HTML 元素对齐通过向某些而不是其他添加文本而被抛出

html - 容器中的 HTML 元素对齐通过向某些而不是其他添加文本而被抛出

问题描述

当两个 HTML 元素放在同一个容器中时，一个包含文本，另一个不包含文本，文本会与它们的对齐方式混淆。带有文本的元素将下拉，以便文本的底部与没有文本的元素的底部对齐，如下例所示：

<!DOCTYPE html>
<html>
<body>
	<div>
		<button style= "width:100px;height:100px;"></button>
		<button style= "width:100px;height:100px;">text</button>
	</div>

</body>
</html>

从两个元素中添加或删除文本可以正确对齐它们，但是有没有办法让元素对齐而不向两者添加文本？

标签： html

解决方案

您可以使容器成为 flex 容器以实现此目的：

<!DOCTYPE html>
<html>
<body>
	<div style="display: flex; flex-direction: row;">
		<button style= "width:100px;height:100px;"></button>
		<button style= "width:100px;height:100px;">text</button>
	</div>

</body>
</html>

推荐阅读