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

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>

我在CSS中也有我的联系表格7表格（这是建立在这上面的）但我不确定它会影响它：

.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...
}