Comment ajouter un bouton avant et après une barre de progression

Question

Je ne trouve pas de façons d'ajouter un bouton directement avant et après une barre de progression. Le résultat est le suivant: voter en bas et voter quelque chose, et la barre de progression réagit ensuite.

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

merci d'avance.

Answer 1

Essayez de mettre les barres de progression et des boutons dans divs séparés les aligner ensuite horizontalement comme ceci:

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

maintenant appliquer ce pour css les garder aligner horizontalement

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