时间戳

首页 > 解决方案 > 在 vue 中将输入与屏幕宽度对齐

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

问题描述

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

在这里分享沙盒链接这就是我所尝试的。

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

标签： javascriptcssvue.jssass

解决方案

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

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%;
  }
}

推荐阅读