订阅表单的间隔输入框和其它行对齐,单位画进框内

秒挂在框外占掉一截宽度,这一行就比名称、地址短一块。单位改成绝对
定位贴在输入框内侧右缘,框本身回到整行宽。
This commit is contained in:
2026-08-12 03:24:34 +08:00
parent 91243354de
commit 14d26bec71
+13 -6
View File
@@ -281,17 +281,24 @@ input {
background: var(--c-bg); background: var(--c-bg);
} }
/* 输入框加单位后缀:数字和它的量纲摆在一起 */ /* 单位画在输入框内侧右缘:框和其它行齐宽,数字和量纲还在一起 */
.with-unit { .with-unit {
display: flex; position: relative;
align-items: center; }
gap: var(--s-2);
.with-unit input {
width: 100%;
padding-right: 2.4em;
} }
.unit { .unit {
flex: none; position: absolute;
color: var(--c-text-soft); right: var(--s-3);
top: 50%;
transform: translateY(-50%);
color: var(--c-text-faint);
font-size: var(--t-sm); font-size: var(--t-sm);
pointer-events: none;
} }
/* 开关。align-self 抵消 row 的 baseline 对齐,胶囊不该被拉到文字基线上 */ /* 开关。align-self 抵消 row 的 baseline 对齐,胶囊不该被拉到文字基线上 */