CSS - 수영장 조사 양식 나는 이런 식으로 뭔가를 만들려고 노력하고

Question

얘들 아 :

그것은 보일 것입니다 방법 :

이 actualy 보이는 방법 :

CSS

h1{ 
    font-size: 16px; 
} 

.bar{   
    width:170px; 
    background-color: #ccc; 
    border: 1px solid #ccc; 
    height: 17px; 
    margin-left: 15px; 
} 

.progress{ 
    background-image: url("images/survey_bar.png"); 
    background-repeat: repeat-x; 
    padding: 5px; 
    text-align: right; 
    height: 17px; 
} 

.label{ 
    margin-bottom: 15px; 
    margin-left: 15px; 
} 

은 HTML 당신은 차이를 볼

<div class="bar"> 
    <div class="progress" style="width:75%;">65%</div> 
</div> 
<div class="label">Dominik !</div> 
<div class="bar"> 
    <div class="progress" style="width:20%;">20%</div> 
</div> 
<div class="label">Jenda</div> 
<div class="bar"> 
    <div class="progress" style="width:15%;">15%</div> 
</div> 
<div class="label">Lojza</div> 

, 텍스트 컬러로하지만 대부분 % 의 수의 위치에 누군가가 내가 그것을 해결하는 데 도움이 수의? 그 패딩/여백 텍스트를 시도하지만 그냥 고칠 수 없습니다.

Answer 1

색상은 단지 color:#fff을 추가하여 해결할 수 있지만 큰 문제는 아닙니다.

위치 지정에 대해서는 line-height:17px을 추가하십시오 (예 : height과 일치). 이렇게하면 막대 중앙에 텍스트가 세로로 배치됩니다.

Answer 2

당신은 .progress{}에 padding:5px;을 삭제하고 나는이 작업을 얻기 위해 주위에 몇 가지 변화 color:white;

.progress{ 
    background-image: url("images/survey_bar.png"); 
    background-repeat: repeat-x; 
    padding:5px;   /* delete this */ 
    text-align: right; 
    height: 17px; 
    color:#fff;  /* add this */ 
} 

DEMO

Answer 3

추가해야합니다. 그건 그냥 사업부를 오버 플로우하는 것처럼

• 이 .progress에서 패딩을 제거
• 흰색
• 추가 라인 높이 변경된 텍스트 색상 : 17px; 텍스트가 오른쪽 DIV 여기

의 가장자리에이 없었다 수직으로 .progress하는 것은 .progress 후 DIV

추가에게 공간을 중심으로하는

.bar{   
    width:170px; 
    background-color: #ccc; 
    border: 1px solid #ccc; 
    height: 17px; 
    margin-left: 15px; 
} 

.progress{ 
    background-image: url("images/survey_bar.png"); 
    background-repeat: repeat-x; 
    color: #fff; 
    text-align: right; 
    height: 17px; 
    line-height: 17px; 
} 

.progress:after { 
    content: "\00a0"; 
} 

.label{ 
    margin-bottom: 15px; 
    margin-left: 15px; 
} 

Answer 4

는 당신이 필요로하는 새로운 CSS를의 패딩을 제거하십시오. 이로 인해 오류가 발생했습니다.

padding:0;