<sapn class="progress"> <span class="target_bar"> <span class="bar" :style="{ width: item.value / item.target * 100 + 'px' }">{{ item.value }}%</span> </span> </sapn>在flex布局中,怎么设置progress宽度为120,targetbar宽度为固定的100
时间: 2024-03-15 07:47:20 浏览: 42
flex布局--顶部/底部固定
5星 · 资源好评率100%
可以在progress上设置宽度为120px,并设置display为flex,然后在target_bar上设置宽度为100px即可。具体的代码如下:
```css
.progress {
width: 120px;
display: flex;
}
.target_bar {
width: 100px;
}
```
这样设置之后,progress元素的宽度就是120px,而target_bar元素的宽度就是100px了。如果你想要在progress中放置多个target_bar,可以将target_bar的宽度设置为百分比。例如,如果你想要放置两个target_bar,可以将它们的宽度都设置为50%。例如:
```css
.progress {
width: 120px;
display: flex;
}
.target_bar {
width: 50%;
}
```
阅读全文