如何让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>

Answer 2

为什么不简单地将渐变移动到header元素并轻松控制其大小：

.header-wrap {
  border: 1px solid black;
}

.header {
  font-size: 2rem;
  margin-bottom: 52px;
  padding-bottom:7px;
  display: inline-block;
  background: linear-gradient(to right, #BE1E2D, #BE1E2D) no-repeat;
  background-size: 80% 7px;
  background-position:0 100%;
}

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

Answer 3

我不认为有一种简单的方法可以使像“棒增长”这样的兄弟80％宽度（文本，“结构框架解决方案”）...技术上，该文本位于div内部占据屏幕的100％的全宽，因此您的代码按预期工作。另一种方法是这样的：

.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: 300px;
}

请注意我如何将80％宽度更改为300px宽度？

300px，大约是标题长度的80％。我用眼球选择300px。做一个小调整，看看它是否适合你。

通过我的编辑，它可以像这样呈现：

希望我正确理解这个问题！