Question

我正在使用Angular的flex-layout库，但是当我创建一个宽度为50％的2列的行时遇到了问题。当其中一个下拉列表以任何方式使用时，另一列将缩小一点。检查Chrome中的元素，我没有看到任何明显的问题。

您可以通过从Select #1下拉列表中选择一个选项来重现此问题。

我错过了什么？

Answer 1

问题在于，当您选择一个项目时，位于选择输入顶部的占位符的宽度会增加一些javascript。正如它在position: relative中一样，它在DOM中的位置不会改变，所以它仍然像在选择字段中一样，但宽度增加，将箭头向右推。

要解决此问题，您可以添加

.mat-select-arrow {
  position: absolute;
  right: 0;
}

因此箭头将处于绝对位置，并且不会被占位符推动。

虽然占位符的宽度已经改变，但这很奇怪......