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

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

2 个答案: