减少或删除 MDL 文本字段的垂直填充

Question

我有一个包含 MDL 文本字段的 table。

<table>
    <tr>
        <td>
            Name
        </td>
        <td>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" id="name" type="text">
                <label class="mdl-textfield__label" for="name">Name</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            Name
        </td>
        <td>
            <div class="mdl-textfield mdl-js-textfield">
                <input class="mdl-textfield__input" id="age" type="text">
                <label class="mdl-textfield__label" for="age">Age</label>
            </div>
        </td>
    </tr>
</table>

但是，这会产生非常丑陋的结果，因为文本字段（以及因此 table 单元格）具有较大的垂直填充。单元格高 69 像素，即使文本字段本身高 29 像素。

我试图通过 css 删除文本字段的填充，但这完全破坏了它的几何形状。从 table 行中删除填充或更改其大小不会改变任何内容。

有没有办法在不损坏文本字段的情况下删除或显着减少单元格或table的垂直填充？

编辑：

我创建了一支笔来说明我的问题。填充为浅蓝色，而实际输入元素为紫色：

https://codepen.io/anon/pen/BWRvrz?editors=1100

Answer 1

我已经通过使用以下样式实现了我想要的：

mdl-textfield{
    padding: 0
}

删除填充。

mdl-textfield__label {
    top: 4px
}

将标签设置到正确的位置。

mdl-textfield__label:after {
    bottom: 0
}

将动画移动到正确的位置。

Answer 2

一种可能被认为是 hack 的计算成本较低的解决方案是使用等于填充的负边距。

.mdl-textfield {
    margin: -20px 0;
}

这里只覆盖了一条规则。

Answer 3

有一种比将 padding 设置为 0px 并固定标签位置和动画更简单的方法。

您可以设置 .mdl-textfield 负边距

.mdl-textfield {
  margin: -20px 0;
}

Answer 4

.mdl-textfield {
  margin: (any number);
}

这不是解决此问题的好方法，因为如果您查看 "mdl-textfield" 和 "mdl-textfield__input" 之间的函数。 "mdl-textfield__input" 在顶部，当用户输入字段时，"mdl-textfield" 将在顶部，这就是它们的工作方式，所以如果你只是改变边距，占位符的文本将被阻止。 div,"mdl-textfield" 和 "mdl-textfield__input" 这两个可以被 javascript 本身改变，所以这意味着你改变了边距，你违反了 MDL 的规则。

减少或删除 MDL 文本字段的垂直填充

Reduce Or Remove Vertical Padding Of MDL Textfields

html

css

material-design

material-design-lite