<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

可以在progress上设置宽度为120px，并设置display为flex，然后在target_bar上设置宽度为100px即可。具体的代码如下：

.progress {
  width: 120px;
  display: flex;
}

.target_bar {
  width: 100px;
}

这样设置之后，progress元素的宽度就是120px，而target_bar元素的宽度就是100px了。如果你想要在progress中放置多个target_bar，可以将target_bar的宽度设置为百分比。例如，如果你想要放置两个target_bar，可以将它们的宽度都设置为50%。例如：

.progress {
  width: 120px;
  display: flex;
}

.target_bar {
  width: 50%;
}

相关问题

26. (填空题, 3.4分) 使用多种方法获得HTML标记的引用 <div id="div1">第一个DIV</div> <tex><r</tex> <div id="div2" class="setc" style="color:red">第二个 <span name="sp">第一个SAPN</span> <tex><</tex> <span name="sp" class="setc" style="color:red">第二个SAPN</span> <tex>SAPP</tex> <p> 段落 1</p><p> 段落 2</p> <tex><j</tex> <tex>^{2}</tex> <button onclick="useld()">使用id属性</button> <button onclick="useName()">使用name属性</button> <button onclick="useTag()">使用标记名</button> <button onclick="useClass()">使用CSS类</button> <button onclick="useSelector()">使用CSS选择器</button> <script> function useld() { var div1 = document._(1) div1.innerHTML = 'div1' function useName() { var sp1 = document_(2) [0] sp1.innerHTML = 'span1' function useTag() { var ps = document._(3) ps[0].innerHTML = '第一个段落' ps[1] (.innerHTML = '第二个段落' } function useClass() ( var setc = document._(4) setc[0]. = 'blue' setc[1].style.color = 'green' } 26. (填空题, 3.4分) 使用多种方法获得HTML标记的引用 <div id="div1">第一个DIV</div> <tex><r</tex> <div id="div2" class="setc" style="color:red">第二个 <span name="sp">第一个SAPN</span> <tex><</tex> <span name="sp" class="setc" style="color:red">第二个SAPN</span> <tex>SAPP</tex> <p> 段落 1</p><p> 段落 2</p> <tex><j</tex> <tex>^{2}</tex> <button onclick="useld()">使用id属性</button> <button onclick="useName()">使用name属性</button> <button onclick="useTag()">使用标记名</button> <button onclick="useClass()">使用CSS类</button> <button onclick="useSelector()">使用CSS选择器</button> <script> function useld() { var div1 = document._(1) div1.innerHTML = 'div1' function useName() { var sp1 = document_(2) [0] sp1.innerHTML = 'span1' function useTag() { var ps = document._(3) ps[0].innerHTML = '第一个段落' ps[1] (.innerHTML = '第二个段落' } function useClass() ( var setc = document._(4) setc[0]. = 'blue' setc[1].style.color = 'green' )

function useld() {
  var div1 = document.getElementById("div1");
  div1.innerHTML = 'div1';
}
function useName() {
  var sp1 = document.getElementsByName("sp")[0];
  sp1.innerHTML = 'span1';
}
function useTag() {
  var ps = document.getElementsByTagName("p");
  ps[0].innerHTML = '第一个段落';
  ps[1].innerHTML = '第二个段落';
}
function useClass() {
  var setc = document.getElementsByClassName("setc");
  setc[0].style.color = 'blue';
  setc[1].style.color = 'green';
}

注：使用CSS选择器的按钮没有在题目中给出，因此无法填空。

浏览器报错2vue.runtime.esm.js:4605 [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Thanks> at pages/index/thanks/index.vue <ElMain> at packages/main/src/main.vue <ElContainer> at packages/container/src/main.vue <Index> at pages/index.vue <Nuxt> <.nuxt/layouts/default.vue> at .nuxt/layouts/default.vue <Root

这个错误提示是由Vue框架提供的，它表明 `<span>` 这个标签被识别为自定义组件，但是在Vue中没有找到对应的组件定义。

可能的原因是你在使用自定义组件时，没有在Vue实例中进行注册。你需要在Vue实例中通过 `Vue.component('component-name', Component)` 的方式注册组件，其中 `component-name` 为组件名，`Component` 为组件对象。如果你使用的是单文件组件（.vue文件），则在组件定义中需要添加 `name` 属性，如下所示：

<template>
  <span>...</span>
</template>

<script>
export default {
  name: 'component-name',
  ...
}
</script>

另外，如果你使用的是第三方组件库，可能需要检查是否正确引入了相关的组件库文件。