将按钮对齐到进度条的右侧

Question

请问有人能帮我将“取消”按钮对齐到进度条的右侧吗？我已经尝试了float和display inline，但都没有成功，我已经没有其他想法了。

以下是代码：

<div class="row">
  <div class="progress progress-striped active" style="width: 500px; margin: 0px auto; height: 40px;">
    <div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div>
  </div>
  <div style="display: inline;"><button class="btn btn-warning">Cancel</button></div>
</div>

这里是一个 JSFiddle 演示，展示了我的问题：

- b0xxed1n

---

像这样http://jsfiddle.net/wFLw5/2/ - Rohit Azad Malik

看起来这就是你想要的：http://jsfiddle.net/wFLw5/4/ - King King

+1 不知道为什么有人踩这个完全没问题的问题。 - SaturnsEye

Answer 1

尝试将您的

元素中的pull-left定义修改为以下内容：

<br><br><br>
<div class="row">
  <div class="progress progress-striped active pull-left" style="width: 500px; margin: 0px auto; height: 40px; margin-right:10px;"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>

    <button class="btn btn-warning pull-left">Cancel</button>

</div>

Demo

- Rohit Azad Malik

Answer 2

您正在使用 Twitter Bootstrap，因此 : 请使用 bootstrap 类而不是硬编写样式。

Fiddle : http://jsfiddle.net/wFLw5/1/

HTML :

<div class="row">
  <div class="col-xs-10 progress progress-striped active"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>
  <div class="col-xs-2"><button class="btn btn-warning">Cancel</button></div>
</div>

- BENARD Patrick

Answer 3

我在加载条和取消按钮中都添加了float:left，并进行了一些轻微的CSS调整，如top和left，以更好地对齐取消按钮：

更新示例

- SaturnsEye

---

现在进度条不再居中对齐了 ;) - b0xxed1n

太好了。谢谢你。 - b0xxed1n

@b0xxed1n 没问题！ - SaturnsEye

Answer 4

我认为The Little Pig的建议是最正确的，建议您使用实际的Bootstrap样式。但是，您可以通过在两个元素上设置display:inline-block;，然后偏移取消按钮来将其对齐到进度条右侧。

- carebdayrvis