Question

我正在为新工作写点什么，我遇到了进度条的问题。我创建了条形码以及所代表的数字，即如果数字是50，那么条形图的一半将被填充（像往常一样）。

但是当我将条形和数字放在同一行（显示：内联块）时，条形图的填充消失。如果没有此属性，条形图看起来正确，但数字未对齐到相同的高度

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

Answer 1

为什么不使用FlexBox的奇迹？

如果您对此不熟悉，请点击以下链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

基本上你可以做以下事情： https://jsfiddle.net/nL3pr8vw/2/

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

现在使用此代码，您可以重新排列div并使用CSS中的FlexBox来获得所需的结果！

栏进度停止使用“display：inline-block;”属性

1 个答案: