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

Question

我正在尝试制作一个包含网站、电子邮件和 "submit" 的简单表格。我希望它看起来像这样：

我一直在这里搜索类似的问题，并找到了一些使用 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 但是当你到达 tablet 或移动时，它只是削减了表单字段，你在移动设备上看到的只是 URL 输入！啊哈。我想知道媒体查询是否是此举？或者，如果我可以将某些东西应用到整个表单 div，从而使它转到 tablet 和移动设备的另一行？我也试过玩这个：http://jsfiddle.net/XAkXg/

但运气不好。非常感谢任何建议！

Answer 1

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

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

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

Get input fields on one line while staying responsive

css

forms

input

contact-form-7

responsive-design