Question

我没有找到在进度条之前和之后直接添加Button的方法。

结果如下：投票并投票，然后进度条做出反应。

    <a href="#" class="btn btn-xs btn-default">+</a>
<div class="progress">
    <div class="progress-bar progress-bar-success progU" style="width: <%=question.percentU%>%">
        <span class="voteText"><%=question.percentU%>%</span>
    </div>
    <div class="progress-bar progress-bar-danger progD" style="width: <%=question.percentD%>%">
        <span class="voteText"><%=question.percentD%>%</span>
    </div>
</div>
<a href="#" class="btn btn-xs btn-default">-</a>

提前谢谢。

Answer 1

尝试将进度条和按钮放在不同的div中，然后将它们水平对齐，如下所示：

<!-- div to contain the progress bar -->
<div class="progress-container">
<!-- Div for left progress bar buttons -->
  <div class="left-progress-bar">
    <a href="#" class="btn btn-xs btn-default">+</a>
  </div>
<!-- Div for center progress bar -->
  <div class="center-progress-bar">
  <div class="progress">
    <div class="progress-bar progress-bar-success progU" style="width: 60%">
        <span class="voteText">60%</span>
    </div>
    <div class="progress-bar progress-bar-danger progD" style="width: 40%">
        <span class="voteText">40%</span>
    </div>
   </div>
  </div>
  <!-- Div for right progress bar buttons -->
  <div class="right-progress-bar">
    <a href="#" class="btn btn-xs btn-default">-</a>
 </div>
</div>

现在将此css应用于它以使它们保持水平对齐

.progress-container{
  width: 300px;
}
.left-progress-bar{
  float:left;width:5%;
}
.center-progress-bar{
  float:left;width:90%;
}
.right-progress-bar{
  float:left;width:5%;
}

如何在进度条之前和之后添加按钮

1 个答案: