为什么我的文字不正确对齐？

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