如何用CSS调整数量输入框尺寸并修正对齐问题？

我的数量输入框出现了对齐错位问题：

错位效果 #

它本应在Quantity标签下方呈现如下正确对齐的样式：

正确对齐效果 #

我尝试过以下CSS代码，但均无效：

width:100%
margin-width: 450px

期望该输入框在Quantity标签下方呈现如下样式：

期望效果 #

请问适用的最佳CSS代码是什么？

解决办法 #

你之前写的margin-width是不存在的CSS属性，这是代码无效的核心原因。结合你要的对齐效果，给你几个可行的CSS方案：

方案1：让输入框和标签完全对齐

如果要让输入框和Quantity标签左对齐，并且宽度填满父容器：

/* 替换成你输入框实际的选择器，比如input[type="number"]或者自定义类名 */
.quantity-input {
  width: 100%;
  margin: 0; /* 清除默认外边距的干扰 */
  box-sizing: border-box; /* 防止内边距/边框撑宽输入框导致错位 */
  padding: 6px 8px; /* 可选，优化输入框的视觉体验 */
}

方案2：用容器布局强制垂直对齐

如果标签和输入框在同一个容器里，给容器加垂直布局：

/* 标签和输入框的父容器 */
.quantity-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px; /* 标签和输入框之间留一点间距 */
}
.quantity-input {
  width: 100%;
  box-sizing: border-box;
}

方案3：手动微调偏移

如果是因为输入框有多余的左边距，直接调整margin-left：

.quantity-input {
  width: 100%;
  margin-left: 0; /* 或者根据实际错位距离设置具体数值，比如10px */
}

注意：一定要把代码里的.quantity-input换成你页面中数量输入框对应的选择器，不然代码不会生效。

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