表单上的内联 CSS答案

【问题标题】：In-line CSS on Form表单上的内联 CSS
【发布时间】：2017-05-09 00:08:03
【问题描述】：

我在 .wysija ((Mail Poet)) 表单上正确排列提交表单时遇到问题。我希望它们被放在表格顶部的旁边，但是现在，我只打算将输入字段排成一行。请参阅下面的图片。非常感谢任何帮助！

（（我在 wordpress.org 上使用 .com））

This is what it looks like currently

This is the coding that I currently have for the form

【问题讨论】：

你能将 CSS 应用到这 3 个元素的父元素吗？
或者尝试删除float: left，将display: block更改为display: inline-block并添加vertical-align: middle。如果您能提供可以复制您所拥有的代码并向我们展示您可以更改的内容，那将真的对我们有所帮助。
如果有帮助，我的网站是 www.themommyhoodmoments.com
我尝试添加垂直对齐并没有改变它。
您可以添加p.wysija-paragraph { display: inline-block; vertical-align: middle; }，但您的表单验证会搞砸。

标签： css wordpress forms

【解决方案1】：

像这样试试。

.main-block{
width:600px;
padding:25px;
}
.name{
width:200px;
float:left;
margin-right:15px;
}
.email{
width:200px;
float:left;
margin-right:15px;
}
.btn{
width:50px;
float:left;
margin-right:15px;
text-align:center;
}

<div class="main-block">
  <div class="name"><input type="text" placeholder="Enter your name here."></div>
  <div class="email"><input type="text" placeholder="Enter your email here."></div>
  <div class="btn"><input type="submit" class="btn"></div>
  <div class="clear"></div>
</div>

【讨论】：