html - 如何让div成为兄弟元素的百分比

Question

我试图让一个 div，bar-grow 成为其上方标题的 width: 80%;。现在，它占据了父容器 80% 的宽度。我不确定如何更改它以使其按我想要的方式工作。

有什么建议吗？

.header-wrap {
	border: 1px solid black;
}	
.header {
	font-size: 2rem;
	margin-bottom: 12px;
	display: inline;
}
.bar-grow {
	background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
	background-size: 100% 7px;
	transition: 1s;-webkit-transition: 1s;
	margin-bottom: 50px;
	height: 7px;
	width: 80%;
}

<div class="header-wrap">
  <p class="header">Structural Framing Solutions</p>
  <div class="bar-grow"></div>
</div>

Answer 1

您需要一些东西来包裹这两个不是全宽元素的元素。我添加了一个 div 并将其设置为 display: inline-block。如果您不想要额外的 div，您可以将该样式应用到 header-wrap div(请注意，它会将 div 缩小到刚好足以包含其内容的宽度)。

.header-wrap {
	border: 1px solid black;
}	
.header {
	font-size: 2rem;
	margin-bottom: 12px;
	display: inline;
}
.header-width-constrainer {
    display: inline-block;
}
.bar-grow {
	background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
	background-size: 100% 7px;
	transition: 1s;-webkit-transition: 1s;
	margin-bottom: 50px;
	height: 7px;
	width: 80%;
}

<div class="header-wrap">
     <div class="header-width-constrainer">
			<p class="header">Structural Framing Solutions</p>
			<div class="bar-grow"></div>
     </div>
</div>