为什么html元素在将溢出:隐藏添加到其中一个同级时会未对齐?

我在一个彼此相邻的div中有两个跨度。但是当我将overflow: hidden添加到其中一个span的那一刻，它就会错位.

为什么会这样？

.parent {
border: 1px solid red;
}
.one {
height: 30px;
width: 30px;
background-color: #4784ff;
display: inline-block;
}
.two {
height: 30px;
width: calc(100% - 30px);
background-color: #08dd0f;
display: inline-block;
overflow: hidden;
}

<div class="parent">
<span class="one">One</span><span class="two">Two</span>
</div>

试试这个：-

使用vertical-align: top;

.parent {
border: 1px solid red;
}
.one {
height: 30px;
width: 30px;
background-color: #4784ff;
display: inline-block;
vertical-align: top;
}
.two {
height: 30px;
width: calc(100% - 30px);
background-color: #08dd0f;
display: inline-block;
overflow: hidden;
}

<div class="parent">
<span class="one">One</span><span class="two">Two</span>
</div>

好的，所以我为您修复它的方式是使用verticle-align:bottom.

发生这种情况的原因只是因为 css 有问题。它已经有了很大的改进，但它仍然存在问题。这是一个很好的例子。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
	<div class="parent">
		<span class="one">One</span><span class="two">Two</span>
	</div>
	<style>
		.parent {
			border: 1px solid red;
		}
		.one {
			height: 30px;
			width: 30px;
			background-color: #4784ff;
			display: inline-block;
		}
		.two {
			height: 30px;
			width: calc(100% - 30px);
			background-color: #08dd0f;
			display: inline-block;
			overflow: hidden;
			vertical-align: bottom;
		}
</style>
</body>

默认情况下display: inline-block设置vertical-align: bottom;因此您需要为span设置vertical-align: top。

注意：溢出仅适用于position，因此在这里您签入代码片段可以正常工作。

.parent {
border: 1px solid red;
}
.one {
height: 30px;
width: 30px;
background-color: #4784ff;
display: inline-block;
}
.two {
height: 30px;
width: calc(100% - 30px);
background-color: #08dd0f;
display: inline-block;
}

<div class="parent">
<span class="one">One</span><span class="two">Two</span>
</div>

更具体地说：垂直对齐大约有 5 个值： -返回页首 -底 -中心 -基线 -继承

如果您的元素具有不同的高度，您将看到不同的高度。 - 顶部：所有元素将与顶部对齐 - 底部：所有元素将与底部对齐 - 居中：所有元素将与居中对齐 - 基线(默认(：取决于字体大小、行高，它们将对齐。 - 继承：只是从父级简单继承。

还有一个额外的信息：如果你的标记在元素之间没有提供任何空格，它会正常工作，但由于它们是内联块，一个换行符或空格会将它们分成两个词(有点(，所以......在它们之间，有空间。无论您如何为两者设置宽度(例如，两个为 50%(，它们仍然会分成两行或多行，因为空格。

相关内容

最新更新

热门标签：