当前位置：首页 > article >正文

css设置动态数组渲染及中间线平均分开显示

article 2024/11/15 17:18:53

效果图：

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index" class="item-container">
      <span class="item">{{ item }}</span>
      <span v-if="index < items.length - 1" class="separator">|</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["a", "b", "c", "d"]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: space-between; /* 平均分配空间 */
}

.item-container {
  position: relative;
  width: 100%; /* 占据整个容器宽度 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.item {
  flex: 1; /* 使项目伸展以填充可用空间 */
  text-align: center; /* 文本居中对齐 */
}

.separator {
  position: absolute;
  left: 100%; /* 放置在当前项的右侧 */
  transform: translateX(-50%); /* 向左移动一半宽度，使其居中 */
  z-index: 1; /* 确保分隔符在上面 */
}
</style>

查看全文

http://www.kler.cn/a/317484.html