Html 如何在angular 4中的一个按钮与另一个按钮之间绘制相等的水平线

这里我试图在按钮之间画一条水平线。我试过很多方法，但都没有成功。我想我需要在CSS中做一些魔术，但我对HTML和CSS是新手，这就是为什么我找不到使它工作的方法

我想：

我明白了：

.divided{
显示器：flex；
对齐项目：居中；
}
.分隔器{
柔性生长：1；
边框底部：1px纯黑；
保证金：5px
}

1.
登录
2.
地址
3.
我的购物车
4.
付款

我认为您正在尝试与使用步进机时相同的操作

使用来自“@angular/material/stepper”的导入{MatStepperModule}； 正确的元素将完成用于

改为使用

（-删除它）

.divder:之后{
内容：''；
宽度：71px；
高度：2倍；
顶部：15px；
背景：黑色；
位置：绝对位置；
右：-12px；
}

1.
登录
2.
地址
3.
我的购物车
4.
付款

您可以使用：在psuedo类之后

.divider:之后{
高度：1px；
宽度：40px；
内容：''；
背景：红色；
位置：绝对位置；
右：0px；
顶部：15px；
}

1.
登录
2.
地址
3.
我的购物车
4.
付款

以下代码在菜单项之间添加大小相等的行，只要有足够的空间

/*只要有足够的空间，菜单和项目的所有直接子项都将放在一行中*/
.菜单，
.项目{
显示器：flex；
柔性流：行换行；
}
/*除最后一个菜单项外，所有菜单项都可以增长*/
.项目：非（：最后一个子项）{
柔性生长：1；
}
/*如果有空间（最后一个项目除外），则在所有项目后追加一条水平线*/
.项目：非（：最后一个子项）：之后{
内容：''；
边框底部：1px实心#000；
高度：50%；/*垂直中心线*/
柔性生长：1；
右边距：10px；
}
/*与菜单无关（排版和重置）*/
按钮
跨度{
字体家族：时代；
字体大小：16px；
填充：0；
边界：0；
右边距：10px；
}
/*与菜单无关（圆形按钮）*/
钮扣{
背景色：#ddd；
边界半径：50%；
高度：20px；
宽度：20px；
}

1.
登录
2.
地址
3.
我的购物车
4.
付款

使用after-psuedo类兄弟，我不熟悉CSS和HTML，我无法理解“after-psuedo类”@charankumarw您使用的是哪一版本的引导？版本4@fi15009;נימככ检查伪类引用，当我使用它时，我遇到了一个问题，这就是为什么我决定使用mat按钮设计自己的问题。也许要找材料分割器？有几个你可以找的请看更新后的图片，我在应用你的解决方案后得到了上面的响应。我想要从文本结尾到按钮的水平线。例如：登录文本到地址按钮的结尾。请帮助我修复它—只需使用css“播放”即可移动它（可能会从

col-sm-3

中删除填充/边距）。如果在菜单类中使用项目类，则可以使用ul和li代替divs；）（这里使用了boostrap，您可能还想在菜单中添加一个row类）@G-Cyr您是对的，使用ul和li将更具语义。一开始，我开始创建一个Bootstrap4解决方案，直到我意识到CSS重置会模糊要点。我认为最好的方法是一种没有引导的极简主义方法。