css设置动态数组渲染及中间线平均分开显示
效果图：
<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>