ラベル改行 - div全体に広がるべき

Question

私はbarという名前のCSSクラスを持っています。この例のMy Label（スパン）は「非常に不満」です。幅のパーセンテージが低い（つまり：5％）場合、bar18.pngグラフィックを超えてdiv全体に跨るのではなく、Labelラインが壊れます（例：Very [linebreak] Dissatisfied）。

CSS：

.bar { 
background: transparent url(bar18.png) repeat-x top left; 
float: left; 
clear: left; 
height: 30px; 
} 

.bar span{ 
font-size: 12px; 
font-weight: bold; 
color: #000; 
float: left; 
margin-left: 5px; 
margin-top: 7px; 
} 

HTML：

<div class="bar" style="width:8%;"> 
    <span>Very Dissatisfied</span> 
</div> 
<div class="p"> 
    <span>(1) 8%</span> 
</div> 

Answer 1

これを試してください：

span{margin-left:20%} 
.bar { 
background: transparent url(bar18.png) repeat-x top left; 
float: left; 
clear: left; 
height: 30px; 
} 

.bar span{ 
font-size: 12px; 
font-weight: bold; 
color: #000; 
float: left; 
margin-left: 5px; 
margin-top: 7px; 
white-space: nowrap; 
}