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标记为条形或条形填充）位于容器内的左侧。

感谢。

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>

Answer 2

该元素已根据提供的代码保留。

HTML中没有center标记，无论如何，该标记已被弃用，不应再使用。

＆＃13;

.container {
  width: 400px;
  margin:auto; /* center the container */
}
.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;
}

＆＃13;

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

＆＃13;

如果容器div 内 <center>标记无法删除，则将标记的text-align设置为left应具有所需效果。

JSFiddle Demo

位置栏位于中心标记

2 个答案: