flex可以的，還有一個(gè)奇葩方法兼容性好一點(diǎn)，放一排等寬的div，第一個(gè)text-align：left，最后一個(gè)right，中間的center，如果是文本可以考慮

flex布局了解一哈
阮一峰-flex
可以給項(xiàng)目的父元素設(shè)置display:block,justify-content:space-between

圖片描述

是這樣要效果嗎？望采納

在每一個(gè)子元素設(shè)定寬(足夠?qū)挘缓笞寖?nèi)容居中)，然后使用space-between或space-around實(shí)現(xiàn)

自己寫了個(gè)一看就很不優(yōu)雅的方式實(shí)現(xiàn)吧，還是在vue里有dom操作真的是...emmm...惡心

<template>
    <div class="wrap">
        <div :style="[key == 0 && marginLeft, key == items.length - 1 && marginRight]" class="text" v-for="(item, key) in items" :key="key"><span>{{ item }}</span></div>
    </div>
</template>

<script>
export default {
    props: {
        items: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            marginLeft: {
                marginLeft: ''
            },
            marginRight: {
                marginRight: ''
            }
        }
    },
    mounted() {
        const texts = document.querySelectorAll('.text span');
        this.marginLeft.marginLeft = `-${texts[0].offsetLeft}px`;
        this.marginRight.marginRight = `-${texts[texts.length - 1].offsetLeft}px`;
    }
}
</script>

<style lang="less">
.wrap {
    display: flex;
    justify-content: space-between;
    .text {
        position: relative;
        flex: 1;
        text-align: center;
        &::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            display: block;
            margin: 5px auto;
            width: 1px;
            height: 10px;
            background: #ccc;
        }
    }
}
</style>

處理marginRight的時(shí)候還是取了offsetLeft，考慮到文字是居中的，左右的offset相同。

https://codepen.io/anon/pen/V...

首先考慮flex布局 justify-content:space-between，兼容IE10+，
其次可以用使用margin-right，然后使用css3選擇器nth-last-child將最后一個(gè)元素的margin置為0