调整中心不在中心位置

Question

我正在 vue 中创建一个简单的步进器组件。我已经能够实现所需的功能，但即使在应用后对齐也会向左移动

justify-content: center

下面是我的代码 https://codesandbox.io/s/awesome-sky-pj9p5x

<template>
  <div class="flex justify-center full-width" style="border: 1px">
    <div class="flex no-wrap justify-center full-width">
      <div
        class="flex full-width items-center q-pb-xl"
        v-for="steps in data"
        :key="steps.key"
      >
        <div
          class="stepper-circle"
          :class="{
            'stepper-circle--filled': currentStep === steps.key,
            'stepper-circle--unfilled': currentStep < steps.key,
          }"
        >
          <q-icon
            v-if="currentStep > steps.key"
            name="check"
            color="white"
            size="xs"
          />
          <div
            v-else
            class="stepper-circle__dot"
            :class="{
              'stepper-circle__dot--active': currentStep === steps.key,
            }"
          />
          <div
            class="stepper-circle__label"
            :class="{ 'text-grey fw3': currentStep < steps.key }"
          >
            {{ steps.name }}
          </div>
        </div>
        <div
          :class="{
            'stepper-separator': steps.key < data.length,
            'stepper-separator--active': steps.key < currentStep,
          }"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Stepper",

  data() {
    return {
      currentStep: 1,
      data: [
        {
          name: "Step 1",
          key: 1,
        },
        {
          name: "Step 2",
          key: 2,
        },
        {
          name: "Step 3",
          key: 3,
        },
      ],
    };
  },

  methods: {
    getSeparatorWidth(stepKey) {
      const totalSteps = this.data.length - 1;
      const widthPercentage = (100 / totalSteps) * stepKey;
      return widthPercentage;
    },
  },
};
</script>
<style lang="scss" scoped>
.items-center {
  align-items: center;
}
.full-width {
  width: 100%;
}
.justify-center {
  justify-content: center;
}
.flex {
  display: flex;
}
.stepper-separator {
  height: 2px;
  background: #d1d5db;
  transition: width 2s;
  flex-grow: 1;
}

.stepper-separator--active {
  background: #08104d;
}

.stepper-circle {
  position: relative;
  width: 32px;
  height: 32px;
  border: 2px solid #08104d;
  border-radius: 50%;
  background-color: #08104d;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  line-height: 15px;
}

.stepper-circle__dot {
  background: #d1d5db !important;
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.stepper-circle__dot--active {
  background: #08104d !important;
}

.stepper-circle__label {
  position: absolute;
  top: 45px;
  font-size: 10px;
  color: #08104d;
  font-weight: 600;
  display: flex;
  white-space: normal;
  width: 80px;
  justify-content: center;
  text-align: center;
}

.stepper-circle--filled {
  background: rgb(255, 255, 255) !important;
  border: 2px solid #08104d !important;
}

.stepper-circle--unfilled {
  background: white !important;
  border: 2px solid #d1d5db !important;
}
</style>

Answer 1

您必须为最后一个元素指定较小的宽度，如下所示：

.flex.full-width.items-center.q-pb-xl:nth-child(3) {width: 36px;}