Question

我有一个容器（示例中为div），里面有子容器（span）。容器和子容器应具有相同的高度，但背景颜色不同。子容器应该像简单的单词一样包装，但背景应该用它们包装。

因此，如果我将主容器display设置为inline-block，它就会变成一个矩形，但其他东西效果很好。

当我将display属性设置为inline时，无法再在CSS中调整其高度。

所以我已经做了一个例子，正如你所看到的，除了主要容器的高度（它比子容器＆＃39;还要小）之外，它几乎可以正常工作。

如何保持容器的内联行为，但将其高度设置为所需值？

＆＃13;

<!doctype html>
<html>
<head>

<style>
body {
	width: 300px;
}

div {
	background: #000;
	color: #fff;
	display: inline;
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
}

div span {
	display: inline-block;

	height: 25px;
	line-height: 25px;
	background: #555;
}
</style>

</head>

<body>

<div>
	<span>some phrase</span>
	<span>some phrase</span>
	<span>some phrase</span>
	<span>some phrase</span>
	<span>some phrase</span>
	<span>some phrase</span>
	<span>some phrase</span>
</div>

</body>

</html>

＆＃13;

Answer 1

这似乎很接近：

div {
  font-size: 25px; /* same as line-height */
}
div > span {
  vertical-align: top; /* fix alignment */
  font-size: 16px; /* reset to default */
}

body {
  width: 300px;
}
div {
  background: #000;
  color: #fff;
  display: inline;
  line-height: 25px;
  font-size: 25px;
}
div > span {
  vertical-align: top; /* fix alignment */
  display: inline-block;
  height: 25px;
  line-height: 25px;
  background: #555;
  font-size: 16px; /* reset to default */
}

<div>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
</div>

如果您有垂直填充，请在line-height和font-size中包含该填充：

body {
  width: 300px;
}
div {
  background: #000;
  color: #fff;
  display: inline;
  line-height: 40px; /* 10 + 25 + 5 */
  font-size: 40px; /* 10 + 25 + 5 */
}
div > span {
  vertical-align: top; /* fix alignment */
  display: inline-block;
  height: 25px;
  line-height: 25px;
  background: #555;
  font-size: 16px; /* reset to default */
  padding-top: 10px;
  padding-bottom: 5px;
}

<div>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
  <span>some phrase</span>
</div>

保持容器的内联行为，但将其高度设置为所需的值

1 个答案: