角度材料水平步进间距答案

【问题标题】：Angular material horizontal Stepper spacing角度材料水平步进间距
【发布时间】：2021-03-28 16:40:17
【问题描述】：

该示例分散了选项卡/标签 https://stackblitz.com/angular/mnmyvamynma?file=src/app/stepper-editable-example.ts

我想将步骤标签居中并使用最小间隙（8px 左右）

如果我在浏览器检查器中取消选中 flex: auto，它会按预期工作（不知道 CSS 中的等价物是什么）

.mat-stepper-horizontal-line {
    border-top-width: 1px;
    border-top-style: solid;
    flex: auto;
    height: 0;
    margin: 0 -16px;
    min-width: 32px;
}

尝试过的选项但不起作用：[尝试过的选项，但最后测试的值为 min-content]

::ng-deep .mat-stepper-horizontal-line {
    flex: min-content;
    min-width: 0;
}

.mat-stepper-horizontal-line {
    flex: min-content;
    min-width: 0;
    
}

如何在 CSS 中做到这一点？

编辑： screen shot

【问题讨论】：

三个标签居中？这是使用 CSS 的方法stackoverflow.com/questions/34870309/… 这是使用 CSS 和 Materialize 的方法。 stackoverflow.com/questions/54728464/… 你能制作一个可运行的sn-p，如图所示吗？你的 stackblitz 很棒，但它会随着时间的推移而改变或消失。
请您删除您的评论，因为它会引起其他人的想法一致吗？ Stack blitz 工作得非常好。如果我能解决，问也没有意义。注意：stackblitz 是角度示例，必须全屏查看，以查看步进器的宽度
我们不会给出拒绝投票的理由。请不要叫人的名字并尽量保持礼貌。当您将鼠标悬停在拒绝投票按钮上时，拒绝投票是有原因的。它表示有人没有发现您的帖子有用。为该站点做出贡献时，您必须确保添加有用的帖子。显然有人认为您的问题不会对其他人有所帮助。
摆脱 flex auto？ 8像素？尝试保证金自动。欢迎来到 SO！
对不起，需要更多细节示例 .mat-stepper-horizontal-line { flex:unset; } 或类似于我作为已尝试选项发布的问题

标签： css angular flexbox

【解决方案1】：

我希望我正确理解了您的问题，但您可以直接定位 .mat-stepper-horizontal-line 并在其上使用自定义 CSS。附上图片。

如果您正在搜索此内容或其他内容，请告诉我？

::ng-deep .mat-stepper-horizontal-line {
  flex: none !important;
}

【讨论】：

谢谢。我可以接受答案。我也尝试过类似的方法（在问题中添加了我的试用版），但是 !important 是关键。我会尽量去掉整条虚线（并且需要它们在中心，现在它们是左对齐的）。