Question

我有一些漂亮的CSS：

$itemHeight: 40px;
$arrowModifier: 8;
$pageBackgroundColor: $color-gray-50;

.processBar {
    display: flex;
    flex-wrap: wrap;

    &_item {
        display: inline-block;
        background: $color-gray-200;
        height: $itemHeight;
        position: relative;
        flex-grow: 1;

        text-align: center;
        line-height: $itemHeight;

        text-decoration: none;
        color: $color-text;
        padding-left: 10px;
        padding-right: 10px;

        &:hover {
            text-decoration: none;
            color: $color-text;
        }

        &-default {
            &:hover {
                background: $color-light-gray;
            }
        }

        &-selected {
            background: $color-white;
        }

        &:before,
        &:after {
            display: inline-block;
            content: "";
            border-style: solid;
            position: absolute;
        }

        &:first-child {
            &:before {
                left:0;
                border: none;
            }
        }

        &:not(:first-child) {
            &:before {
                left:0;
                border-color: transparent transparent transparent $pageBackgroundColor;
                border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
            }
        }

        &:last-child {
            &:after {
                right: 0;
                border: none;
            }
        }

        &:not(:last-child) {
            &:after {
                right:0;
                border-color: $pageBackgroundColor transparent;
                border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
            }
        }
    }
}

以下是使用它的HTML：

<div class="processBar">
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>     
    <a href="javascript:" class="processBar_item">Label</a>
</div>

这是它的作用：

但是在某个尺寸下，:after元素可以跳下来，如下所示：

我不明白为什么会这样。我怎么能阻止它发生？

Answer 1

Flex容器上的::before和::after伪元素被视为弹性项目。

::before伪是第一项。 ::after伪是最后一个。因此，您必须将它们视为其他弹性项目的兄弟姐妹。

您可以尝试使用order属性重新排列项目以达到您想要的效果。

Answer 2

这是什么CSS预处理器？我在CodePen上使用了每个预编译器并从$ variables中得到了错误，因此我将它们删除并用任何内容填充它们。这是手写笔吗？无论如何，除了被删除的变量和一些颜色变化之外，唯一重要的变化是我将flex-wrap:wrap更改为flex-wrap:nowrap。

<强>段

＆＃13;

.processBar {
  display: flex;
  flex-wrap: nowrap;
}

.processBar_item {
  display: inline-block;
  background: #c8c8c8;
  height: 40px;
  position: relative;
  flex-grow: 1;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  color: #000;
  padding-left: 10px;
  padding-right: 10px;
}

.processBar_item:hover {
  text-decoration: none;
  color: red;
}

.processBar_item-default:hover {
  background: #808080;
}

.processBar_item-selected {
  background: cyan;
}

.processBar_item:before,
.processBar_item:after {
  display: inline-block;
  content: "";
  border-style: solid;
  position: absolute;
}

.processBar_item:first-child:before {
  left: 0;
  border: none;
}

.processBar_item:not(:first-child):before {
  left: 0;
  border-color: red;
  border-width: 20px 0 20px 5px;
}

.processBar_item:last-child:after {
  right: 0;
  border: none;
}

.processBar_item:not(:last-child):after {
  right: 0;
  border-color: tomato;
  border-width: 20px 0 20px 5px;
}

＆＃13;

<div class="processBar">
  <a href="javascript:" class="processBar_item">Label</a>
  <a href="javascript:" class="processBar_item">Label</a>
  <a href="javascript:" class="processBar_item">Label</a>
  <a href="javascript:" class="processBar_item">Label</a>
  <a href="javascript:" class="processBar_item">Label</a>
  <a href="javascript:" class="processBar_item">Label</a>
</div>

＆＃13;

停止：元素跳转到换行的下一行

2 个答案: