在 vue 中将输入与屏幕宽度对齐

Question

我有 4 个输入必须一个接一个地排成一行，随着屏幕宽度的减小，输入框应该移动到下一行，并且宽度应该在 4 个输入之间平均分配，并分别调整为屏幕宽度。屏幕变小，输入将开始看起来像一个在另一个之下..

分享沙盒链接here这就是我所尝试的一切......

编辑：没有硬编码宽度，它应该平均分配给 4 个输入

Answer 1

你需要添加一个合适的边框，这样你的输入就不会溢出它们的容器：

html {
  box-sizing: border-box;
}

*, ::before, ::after {
  box-sizing: inherit;
}

之后，您可以将width: 25% 设置为输入容器，添加小的水平填充并删除margin-right。稍后您可以借助针对特定屏幕尺寸的媒体查询将width 设置为50% 和100%：

@media (max-width: 767px) {
  .input-division {
    width: 50%;
  }
}

@media (max-width: 479px) {
  .input-division {
    width: 100%;
  }
}