Question

我有一个简单的电子邮件注册列表，我希望能够做出回应。目前，当它包装时，它只是在溢出时包裹每个单独的元素。

我想要的功能是当第一个元素溢出时整个表单从垂直布局变为水平。

Ex :(适用于较宽的屏幕长度）

[Input Name]  [Input Email]   [Input Country]   [Submit]

它目前还不是很敏感，因为随着屏幕尺寸变小或移动到移动设备，它将如下所示：

   [Input Name]  
[Input Email]   [Input Country]   [Submit]

或者喜欢：

   [Input Name]  
[Input Email]   
  [Input Country]   [Submit]

它变形了。我想要所有元素在一行或4行不同。

对于小屏幕宽度（即：移动），它应如下所示：

[Input Name.   ]  
[Input Email.  ]   
[Input Country ]   
[Submit.       ]

知道如何使用HTML和CSS实现这一目标吗？

Answer 1

您需要使用媒体查询来设置特定的页面宽度，以处理从块到内联的转换。

input {
  width: 95%;
  display: block;
  margin: 5px;
  
}

@media screen and (min-width: 400px) {
input {
    display: inline-block;
    width: 80px;
  }
  }

<form>
  <input>
  <input>
  <input>
  <input>
</form>

Answer 2

您可以在输入元素上使用max-width属性和其他属性输入[type =＆＃34; text＆＃34;] {max-width：95％;} 或者您可以使用css媒体查询 @media屏幕和（最小宽度： 440px） { 输入{宽度：400px; 显示：块;} }

4个元素响应包含在单个列中

2 个答案: