当我向表单添加选择输入时，表单行高发生了变化答案

【问题标题】：Form line-height changed when I added a select input to my form当我向表单添加选择输入时，表单行高发生了变化
【发布时间】：2023-03-13 15:38:01
【问题描述】：

为了简单起见，我首先通过仅添加文本框来构建我的表单，直到我决定我想要它的外观。

后来，当我添加一些其他类型的输入（例如下拉选择器）时，表单开始更改这些元素所在行的行高。

----------------------------------------------- ----------------------

Simpy 将行高设置为较小的值对我不起作用，因为所有输入，无论它们在表单上看起来有多大，都报告相同的行高 26 像素，并将其更改为较小的值会使标签重叠每个输入下方的那条小线。

我该如何解决这个问题并让我的表单像一开始那样显示？

编辑：

我忘了说这可能是标签问题，因为所有选择器的标签都显示在底部。

EDIT2：

我的代码看起来像这样

<md-input-container flex="" layout="column" ng-repeat="field in row">
      <!-- input label -->
      <label>{{field.label}}</label>
      <input name="field.field" ng-model="field.val">
</md-input-container>
<md-input-container flex="" layout="column" ng-repeat="field in row">
      <!-- input label -->
      <label>{{field.label}}</label>
      <md-select ng-model="field.val">
        <md-option ng-repeat="c in field.list" value="{{c.value}}">{{c.label}}</md-option>
      </md-select>
</md-input-container>

EDIT3：

似乎md-select 在 6022 处从 angular-material.css 继承了 24px 2px 26px 的填充，这是造成此问题的原因。我仍然怀疑，在角度材料中，每个人都必须删除选择输入的默认填充以使其与所有其他输入对齐。

【问题讨论】：

它必须从某些 css 类中获取一些高度。你能把你的html贴在这里吗？
@KapilGarg 刚刚做到了。我会搜索各种css样式，看看有没有什么乱七八糟的。
在删除除 ngMaterial 之外的所有其他 css 文件后，问题仍然存在。这个pen 这里虽然显示很好！

标签： javascript angularjs angular-material

【解决方案1】：

对于花时间仔细查看所提供示例的任何人来说，答案都很简单明了。

在任何情况下，必须确保要么根本不使用<label>，要么如果他使用<md-select-label> 作为选择输入。

【讨论】：