html - 在 css 水平条形图之前和之后放置文本

Question

这就是我正在尝试做的事情。我有 CSS 水平条形图。问题是我试图在之前和之后获取一些文本。请查看当前截图

.forecasting {
  box-sizing: border-box;
  width: 100%;
  margin: 20px 0;
}

.forecasting p {
  padding: 0;
  letter-spacing: 1px;
  margin: 0 0 15px;
  color: #000;
  font-weight: bold;
}

.forecasting p:nth-child(2) {
  float: right;
  position: relative;
  top: -25px;
}

.forecast-bar {
  box-sizing: border-box;
  background: #fff;
  border: #0000CD 1px;
  border-style: solid;
}

.forecast-todate {
  width: 100%;
  height: 15px;
  background: #0000CD;
}

<div class="forecasting">
  <p>Name of person $30,777,854.19</p>
  <p>$30,777,854.19</p>

  <div class="forecast-bar">
    <div class="forecast-todate" style="width: 90%;"></div>
  </div>
</div>

我怎样才能先获取文本，中间获取条形图，最后获取文本。

Answer 1

这就是你要找的吗？基本上，我已将 flexbox 添加到主 div 中，将子元素排成一行，并使用 align-items: center 将它们水平居中

 .forecasting {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
 }

.forecasting p {
   padding: 0;
   letter-spacing: 1px;
   color: #000;
   font-weight: bold;
}

.forecast-bar {
    box-sizing: border-box;
    background: #fff;
    border: #0000CD 1px;
    border-style: solid;
    width: 80%;
    padding-right:20px;
    margin-right:10px;
}

.forecast-todate {
   width: 100%;
   height: 15px;
   background: #0000CD;
 }

 <div class="forecasting">
      <p>Name of person </p>

      <div class="forecast-bar" >
         <div class="forecast-todate" ></div>
      </div>
      <p>$30,777,854.19</p>
  </div>