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

秒挂在框外占掉一截宽度，这一行就比名称、地址短一块。单位改成绝对定位贴在输入框内侧右缘，框本身回到整行宽。
2026-08-12 03:24:34 +08:00
parent 91243354de
commit 14d26bec71
1 changed files with 13 additions and 6 deletions
@@ -281,17 +281,24 @@ input {
  background: var(--c-bg);
 }

-/* 输入框加单位后缀：数字和它的量纲摆在一起 */
+/* 单位画在输入框内侧右缘：框和其它行齐宽，数字和量纲还在一起 */
 .with-unit {
-  display: flex;
-  align-items: center;
-  gap: var(--s-2);
+  position: relative;
+}
+
+.with-unit input {
+  width: 100%;
+  padding-right: 2.4em;
 }

 .unit {
-  flex: none;
-  color: var(--c-text-soft);
+  position: absolute;
+  right: var(--s-3);
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--c-text-faint);
  font-size: var(--t-sm);
+  pointer-events: none;
 }

 /* 开关。align-self 抵消 row 的 baseline 对齐，胶囊不该被拉到文字基线上 */