Question

我在彼此相邻的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>

Answer 1

尝试一下：-

使用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>

Answer 2

好的，所以我为您修复的方式是使用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>

Answer 3

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

注意：溢出仅适用于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>

Answer 4

更具体： vertical-align具有大约5个值： - 最佳 -底部 - 中央 -基线 -继承

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

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

为什么将html元素添加到其中一个同级对象中时将html元素变得未对齐？

4 个答案: