如何在進度條前後添加按鈕

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