Mehrere Bars in den gleichen .progress mit href funktioniert nicht?

Question

Progress-Bar-Gefahr wird nicht angezeigt, ich habe versucht, die unten HTML ohne, es funktioniert. Ich weiß nicht, warum es nicht funktioniert? siehe den Screenshot & vorschlagen .. Dank

<div class="progress"> 
 
    <a href="/sample1"> 
 
     <div class="progress-bar progress-bar-success" style="width: 65%"> 
 
      <span>65%</span> 
 
     </div> 
 
    </a> 
 
    <a href="/sample2"> 
 
     <div class="progress-bar progress-bar-danger" style="width: 35%"> 
 
      <span>35%</span> 
 
     </div> 
 
    </a> 
 
</div>

Answer 1

Zunächst einmal: Sie platzieren 2 <a> Elemente und innerhalb diejenigen, die Sie platzieren die Stäbe mit einem % Breite.

Das ist dein Problem. Sie müssen die Klassen des <div> auf dem Eltern <a> setzen und der Span wäre dann auch entbehrlich. Wie so:

<div class="progress"> 
    <a href="/sample1" class="progress-bar progress-bar-success" style="float:left;width:65%;display:block;"> 
      <span>65%</span> 
    </a> 
    <a href="/sample2" class="progress-bar progress-bar-danger" style="width: 35%;float:left;display:block;"> 
      <span>35%</span> 
    </a> 
</div> 

Ansonsten sind die div s im <a> wird 65% und 35% ihrer parent Breite. So funktionieren% -Weiten. Wenn Sie Elemente unter Verwendung von % nebeneinander platzieren möchten, müssen sie sich innerhalb desselben übergeordneten Containers befinden.