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

Question

我没有找到直接在进度条前后添加按钮的方法。

结果如下：投票下来并投票决定某件事，然后进度条反应。

<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%; 
}