CSS百分比条正在采取100％而不是40％

我想只用CSS来创建一个百分比的状态栏，所以我必须：CSS百分比条正在采取100％而不是40％

span.chart { 
 
    background-color: #f0f0f0; 
 
} 
 
span.chart span { 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 
span.chart span:before { 
 
    content: "\00a0"; 
 
} 
 
span.label {  
 
}

<div class="meter"> 
 
    <span class="chart"> 
 
    <span style="width: 40%;"></span> 
 
    </span> 
 
    <span class="label">40%</span> 
 
</div>

的问题是，红酒吧即使宽度设置为40％，也会取代40％而不是100％。

我错过了什么？

来源

2015-11-09 Miguel Moura

默认跨度是一个内联元素的变化幅度阻止（'显示：block'）为.chart它会工作 –

你的标题说，“个巴正在100％，而不是40％。”你的文字说“红色的酒吧是40％而不是100％”。所以知道你想要什么很棘手。该代码似乎工作正常。 –

它看起来像是因为你没有为外容器（'meter'）设置宽度，所以当你设置跨度的宽度（40％）时，外容器只是扩展/缩小以适应其内容。 – username

<span class="chart">宽度未配置，也是inline元素，使其为inline-block。

span.chart { 
 
    background-color: #f0f0f0; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
span.chart span { 
 
    background-color: red; 
 
    display: inline-block; 
 
} 
 
span.chart span:before { 
 
    content: "\00a0"; 
 
} 
 
span.label {  
 
}

<div class="meter"> 
 
    <span class="chart"> 
 
    <span style="width: 40%;"></span> 
 
    </span> 
 
    <span class="label">40%</span> 
 
</div>

来源

2015-11-09 11:23:50 rajuGT

我完全错过了图表上的宽度......当然......谢谢！ –

这是你追求的：

http://jsfiddle.net/okw8za4h/

您需要设置一个宽度外容器和第一个跨度。否则，实际进度指示器将始终显示为100％，因为其父元素正在调整其大小以适合其内容。

<div class="meter"> 
    <span class="chart"> 
    <span style="width: 40%;"></span> 
    </span> 
    <span class="label">40%</span> 
</div> 

div 
{ 
    width: 256px; 
} 

span.chart { 
    display: block; 
    width: 100%; 
    background-color: #f0f0f0; 
} 
span.chart span { 
    background-color: red; 
    display: inline-block; 
} 
span.chart span:before { 
    content: "\00a0"; 
} 
span.label {  
}

来源

2015-11-09 12:11:39 username

CSS百分比条正在采取100％而不是40％

回答

相关问题