Question

有人可以帮我将取消按钮对齐进度条右侧吗？我试过浮动并显示内联但没有成功，我没有想法。

以下是代码：

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

Here's a fiddle它显示了我的问题：

Answer 1

您正在使用Twitter Bootstrap：使用引导类而不是您的硬风格。

小提琴：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>

Answer 2

我在加载栏和取消按钮上添加了float:left，加上一些轻微的CSS以更好地对齐取消按钮，例如top和left：

UPDATED EXAMPLE

Answer 3

尝试定义 div的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

Answer 4

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

将按钮对齐进度条右侧

4 个答案: