Question

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

<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>

但是，这会产生非常难看的结果，因为文本字段（以及表格单元格）具有较大的垂直填充。尽管文本域本身高29px，但单元格高69px。

我试图通过css删除文本域的填充，但这已经完全破坏了它的几何体。从表格行中删除填充或更改其大小不会改变任何内容。

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

修改

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

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

计算成本较低的解决方案可能被认为是黑客攻击是使用等于填充的负边距。

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

此处只会覆盖一条规则。

Answer 3

除了将padding设置为0px并修复标签位置和动画之外，还有一种更简单的方法。

您可以设置.mdl-textfield保证金负数

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

Answer 4

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

这不是解决这个问题的好方法，因为如果你研究＆＃34; mdl-textfield＆＃34;之间的功能。和＆＃34; mdl-textfield__input＆＃34; 。＆＃34; mdl-textfield__input＆＃34;当用户输入输入字段时，它处于乞讨的顶部，＆＃34; mdl-textfield＆＃34;将在顶部，这是多么有效，所以如果你只是改变边距，占位符的文本将被阻止。这两个div，＆＃34; mdl-textfield＆＃34;和＆＃34; mdl-textfield__input＆＃34;，可以通过javascript本身进行切换，这意味着你改变了保证金，你违反了MDL的规则。

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

4 个答案: