Css 一行4个联系人表单7个字段
我正在尝试制作一个联系人表单,在同一行中一个接一个地包含4个字段,在平板电脑或移动设备中,这些字段将以100%的宽度一个接一个 事实上,我已经尝试了很多,我被css弄糊涂了 这是我使用的css:Css 一行4个联系人表单7个字段,css,wordpress,contact-form,contact-form-7,Css,Wordpress,Contact Form,Contact Form 7,我正在尝试制作一个联系人表单,在同一行中一个接一个地包含4个字段,在平板电脑或移动设备中,这些字段将以100%的宽度一个接一个 事实上,我已经尝试了很多,我被css弄糊涂了 这是我使用的css: .one-half, .one-third { position: relative; margin-right: 4%; float: right; margin-bottom: 20px; } .one-half { width: 48%; } .one-third { width: 3
.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: right;
margin-bottom: 20px;
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.last {
margin-left: 0 !important;
clear: left;
}
@media only screen and (max-width: 767px) {
.one-half, .one-third {
width: 100%;
margin-right: 0;
}
}
表格为:
<div class="one-half">
[text* Fullname placeholder "full name"]
</div>
<div class="one-half">
[tel* phone placeholder "phone"]
</div>
<div class="one-half">
[email* email placeholder "email"]
</div>
<div class="one-half last">
[submit "SEND"] </div>
[文本*全名占位符“全名”]
[电话*电话占位符“电话”]
[电子邮件*电子邮件占位符“电子邮件”]
[提交“发送”]
将这些属性赋给元素的父div,就像赋float一样
<div class="container">
<div class="one-half">
[text* Fullname placeholder "full name"]
</div>
<div class="one-half">
[tel* phone placeholder "phone"]
</div>
<div class="one-half">
[email* email placeholder "email"]
</div>
<div class="one-half last">
[submit "SEND"] </div>
</div>
您的电子邮件*:[电子邮件*您的电子邮件][提交“发送”]
浮动:右;保证金权利:4%代码>必须浮动:左;左缘:4%代码>用于dekstop。另外,你们想在dekstop上以单行显示相同的字段,而在dekstop上,这应该是一个接一个地显示在下面?这个怎么样?为什么不使用,它允许您使用UI编辑器构建网格布局表单。您可以轻松地在一行中创建4列,并在每列中放置您的标记,以获得您在表单中查看的结果。非常感谢!干得好
container:after{
content:'';
display:table;
clear:both;
}
Your e-mail*: <span style="display:inline-block;">[email* your-email]</span> <span style="display:inline-block;">[submit "Send"]</span>