html - how to make text followed by a rectangle box filled with color html css with responsive

Question

I need a small help regarding simple html and css inside a grid.

like to attach a image which i actually want to achieve

#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>

I have achieved this as time arround please help me fix this issue (not responsive)

标签： htmlcss

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>