如何实现高度调整后右对齐input文本的基线垂直对齐？

问题分析 #

你之前尝试的display: inline-block和vertical-align: text-bottom无效，是因为vertical-align属性控制的是元素自身在父容器中的对齐方式，而非input内部文本的垂直对齐。要让input内的文本对齐基线，需要调整input内部的布局属性。

可行方案 #

方案1：用padding+line-height精确控制（推荐）

去掉固定height，通过padding控制容器高度，同时让line-height等于font-size，确保文本基线自然对齐：

form #display {
    width: 100%;
    border: none;
    background-color: rgb(12, 37, 30);
    color: white;
    text-align: right;
    padding: calc(10% - 12px) 20px 0; /* 顶部padding=容器总高度-字体高度，底部padding设为0 */
    font-family: 'Gotham Rounded Light', sans-serif;
    font-size: 12px;
    line-height: 12px; /* 与font-size一致，确保文本基线对齐 */
}

注：calc(10% - 12px)中的12px是你的font-size值，可根据实际调整

方案2：保留height，用Flexbox对齐

如果必须保留height:10%的设置，可通过Flexbox让文本对齐容器底部（对于无下行字母的文本，底部近似基线位置）：

form #display {
    height: 10%;
    width: 100%;
    border: none;
    background-color: rgb(12, 37, 30);
    color: white;
    text-align: right;
    padding-right: 20px;
    font-family: 'Gotham Rounded Light', sans-serif;
    font-size: 12px;
    display: flex;
    align-items: flex-end; /* 让内容对齐容器底部 */
}

方案3：重置默认padding+line-height

input默认会有内置padding，重置后搭配line-height可以让文本对齐基线：

form #display {
    height: 10%;
    width: 100%;
    border: none;
    background-color: rgb(12, 37, 30);
    color: white;
    text-align: right;
    padding: 0 20px; /* 重置上下padding为0 */
    font-family: 'Gotham Rounded Light', sans-serif;
    font-size: 12px;
    line-height: 10%; /* 与height值一致，让文本垂直对齐 */
}

内容的提问来源于stack exchange，提问作者Gurav