html - CSS:如何将文本与高度调整的输入元素的基线对齐？

Question

根据mozilla documentation如果元素的显示设置为 inline-block，我应该能够将输入元素中的文本设置为基线。

我有一堆 input 元素，我调整了它们的高度，但现在当您尝试在其中输入时，文本显示为垂直居中。

如何让文本显示在 CSS 中输入的底部(基线)？

http://jsfiddle.net/ay5y16ob/1/

Answer 1

文本输入不受垂直对齐属性的影响，但您可以使用顶部填充来伪造它:

.i, i:focus {
    display: inline-block;
    position: relative;
    vertical-align: text-bottom;
    border: none;
    border-bottom: 1px solid #A4A4A4;
    outline: none;
    outline: 0;
    width: 90%;
    padding-top: 60px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    font-family: arial;
    font-size: 100%;
}

jsFiddle example