如何使文本紧随其后的是一个矩形框，其中填充了带有响应的彩色HTML CSS

Question

关于网格内的简单html和CSS，我需要一些帮助。

喜欢附加我实际想要实现的图像

#rectangle {
  width: 100%;
  height: 40px;
  background: #8DB23F;
}

<div class="row">
  <div class="col-md-12" id="rectangle"><span id="first" style="background-color:white;color:#8DB23F;font-size:40px;padding:7px 0px 2px 1px;border-color:white;margin-left: -15px;"><strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong></span></div>
</div>

随着时间的推移，我已经实现了这一目标，请帮助我解决此问题（无响应）

Answer 1

这是一个建议，它将适用于平面背景颜色和单行文本。只需尝试。

.row {
  width: 100%;
  height: 40px;
  background: #8DB23F;
}
.row strong{
  line-height: 40px;
  background: white;
  display: inline-block;
}

<div class="row">
    <strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong>
</div>

Answer 2

Request

#rectangle {
  width: 100%;
  display:block;
  height:40px;
  background-color: red;
}

strong {
  background-color: #fFF;
}
p {
  flex: 1 0 auto;
  margin-right:10px;
  font-size:30px;
}

Answer 3

我认为这将帮助您实现所需的设计

<div class="row">
   <div class="col-md-12" id="rectangle"><span id="first"><strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong></span></div>
</div>
<style>
#rectangle{
     width:100%;
     height:auto;
     background:#8DB23F;
     }
 #first{
 background-color:white;
 color:#8DB23F;
 font-size:40px;
 padding:7px 0px 2px 1px;
 border-color:white;
 margin-left: -15px;
 }
 @media screen and (max-width: 480px) {
    #first {
    font-size:20px;
    }
}
</style>

Answer 4

#Box {
	width: 100%;
	height: auto;
	background: #8DB23F;
}
#name {
	background-color: white;
	color: #8DB23F;
	font-size: 40px;
	padding: 10px 0px 3px 3px;
	border-color: white;
	margin-left: -15px;
}

@media screen and (max-width: 480px) {
#Box {
	height: 100%;
}
#name {
	font-size: 37px;
}
}

<div class="row">
 <div class="col-md-12" id="Box"><span id="name"><strong>&nbsp;&nbsp;&nbsp;JAW CRUSHER&nbsp;</strong></span></div>
</div>