javascript - 中心标签内左侧的位置栏

Question

在我的 index.html 中，我创建了以下位于中心标记内的 div。

<div class="container">
    <div class="bar">
    <span class="bar-fill"></span>
    </div>
</div>

这在页面上看起来像这样:[进度条图像] 1

我希望蓝色条位于该容器的左侧。

下面是我的 CSS:

/* Progress Bar */
.container {
width: 400px;
}

.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0px 1px 3px rgba(0,0,0,.2);
}

.bar-fill {
height: 20px;
display: block;
background: cornflowerblue;
width: 80%;
border-radius: 3px;
}

再一次，我希望蓝色条(div 标记为 bar 或 bar fill)位于容器内的左侧。

谢谢。

Answer 1

只需将 margin-left: 0px; 添加到 .bar-fill

.container {
  width: 400px;
}
.bar {
  width: 100%;
  background: #eee;
  padding: 3px;
  border-radius: 3px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}
.bar-fill {
  height: 20px;
  display: block;
  margin-left: 0px;
  background: cornflowerblue;
  width: 80%;
  border-radius: 3px;
}

<div class="container">
  <div class="bar">
    <span class="bar-fill"></span>
  </div>
</div>