如何在进度条前后添加按钮
问题描述:
我没有找到直接在进度条前后添加按钮的方法。如何在进度条前后添加按钮
结果如下:投票下来并投票决定某件事,然后进度条反应。
<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>
非常感谢您。
答
尝试把在单独的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%;
}