在保持响应的同时在一行上获取输入字段

Question

我正在尝试用网站、电子邮件和“提交”制作一个简单的表单。我希望它看起来像这样：

我一直在这里搜索类似的问题，并找到了一些使用 table 或 flex 将所有字段放在一行上的解决方案，但随后出现了一些格式（不居中）和响应问题：/

这是我的表单的 HTML：

<div class="seoaudit">
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Website URL
    [url* url-613]</label></div>
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Email
    [email* your-email] </label></div>


<div class="seoinput">
<br/>
[submit "Send Request!"]</div>
</div>

这是我目前拥有的 CSS：

<div class="seoaudit">
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Website URL
    [url* url-613]</label></div>
<div class="seoinput"><label style="color: #24535d; font-family: 'Muli'; font-style: italic; font-size: 18px;"> Your Email
    [email* your-email] </label></div>


<div class="seoinput">
<br/>
[submit "Send Request!"]</div>
</div>

我的联系表单 7 表单的 CSS 中也有这个（这是它的基础），但我不确定它会影响它：

.wpcf7-form-style {
    margin: 0 auto;
    float: none;
    display: block;
}

.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="url"] {
margin: 9px auto 0 !important;
    }

所以它在桌面上看起来就像我想要的那样：D 但是当您使用平板电脑或移动设备时，它只是剪切表单字段，您在移动设备上看到的只是 URL 输入的一部分！啊。我想知道媒体查询是否是移动？或者，如果我可以将某些东西应用于整个表单 div，使其转到平板电脑和移动设备的另一行？我也试过玩这个：http://jsfiddle.net/XAkXg/

但没有运气。任何建议都非常感谢！

Answer 1

使用媒体查询在小屏幕中获得您想要的布局。 示例：

@media (min-width:480px){
    your input styles here...
}