爲什麼我的文字不正確對齊？

Question

爲什麼我的測試不像右邊的文本那樣正確對齊。

<div class="project-container">    
<h4 class="progress-label">Java</h4>  
    <div class="progress"> 
    <div class="bar" 
     style="width: 60%;">   
    </div> 
    </div> 
</div> 

http://cssdeck.com/labs/gnfbvxtb

Answer 1

我根據你提供的鏈接的答案。主要問題是你在css代碼中的各個位置設置的高度。

.progress-title{ 
    float: left; 
    margin-right: 10px; 
} 

.progress-title-right{ 
    float: right; 
} 

.project-container { 
    width: 400px; 
    margin: 10px auto 0; 
} 


.progress-stacked { 
    overflow: hidden; 
    margin-bottom: 5px; 
    background-color: #e5e5e5; 
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    border-radius: 0px; 
} 

請檢查您的其他類與僞類的任何問題。

Answer 2

看來你的關閉div是錯位的。換句話說，您的<span class="progress-title-right">Some title</span>應該在<div class="progress">之前。

下面是更新HTML的小提琴：http://jsfiddle.net/8kekB/。