栏进度停止使用“显示：内联块；”财产答案

【问题标题】：bar progress stop working with "display: inline-block;" property栏进度停止使用“显示：内联块；”财产
【发布时间】：2018-01-19 19:10:34
【问题描述】：

我正在为新工作写一些东西，但进度条有问题。我用所代表的数字创建了条形图，即如果数字是 50，那么将填充一半的条形图（像往常一样）。

但是当我将条形图和数字放在同一行时（带有 display: inline-block），条形图的填充消失了。如果没有这个属性，条形图看起来是正确的，但数字不会对齐到相同的高度

html:

            <div style="width:100%;">
                 <div class="progress">
                    <div class="progress-bar" style="width:{{value}}%"></div>
                 </div>
                <span class="value">{{value | number:0}}</span>
            </div>

css:

.progress {
    height: 0.3rem;
    width: 90%;
    display: inline-block;
}
.value {
    float: right;
    display: inline-block;
    vertical-align:top;
}

我不明白这个问题..需要你的帮助。

TNX！！！

【问题讨论】：

标签： html css angularjs progress-bar

【解决方案1】：

您为什么不直接使用 FlexBox 的奇迹？

如果您对此不熟悉，这里有一个链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

基本上，您可以执行以下操作： https://jsfiddle.net/nL3pr8vw/2/

* {
  padding: 0;
  margin: 0;
}

.load {
  display: flex;
  justify-content: left;
  align-items: center;
  background: grey;
  padding: 5px;
  margin: 10px;
  width: 300px;
  border-radius: 5px;
}

.bar {
  width: 45%;
  background: red;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  height:25px;
}

p {
  color: white;
  font-family: Arial;
  font-size: 0.5em;
}

<div class="load">
  <div class="bar">
    <span class="count"><p>45%</p></span>
  </div>
</div>

现在有了这段代码，你可以重新排列 div 并在 CSS 中使用 FlexBox 来获得你想要的结果！

【讨论】：