html 如何在2列或更多列上显示联系表单7字段

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 如何在2列或更多列上显示联系表单7字段相关的知识,希望对你有一定的参考价值。

.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}
<div class="one-half">
<label> Your Name (required) 
     </label>
</div>
 
<div class="one-half last">
<label> Your Email (required)
    [email* your-email] </label>
</div>
 
<label> Your Message
    [textarea your-message] </label>
 
[submit "Send"]

以上是关于html 如何在2列或更多列上显示联系表单7字段的主要内容,如果未能解决你的问题,请参考以下文章

html 设置表单字段的样式以在2列上呈现 - 水平字段

在下拉列表中选择特定值时如何在联系表单 7 中启用字段

WordPress:如何在联系表单 7 生成的输入字段(日期选择器)中处理图标?

联系表格 7 通过获取请求设置字段值

如何水平对齐 Contact Form 7 插件表单?

如何从 URL 获取值并将其添加为联系表 7 中的隐藏字段