CSS 联系表 7 - 同一行上的多个文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42872032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Contact Form 7 - Multiple text fields on the same line
提问by Benjamin
I am using Contact Form 7 to design a booking form for a hotel.
我正在使用联系表 7 设计酒店预订表。
I can't figure out how to customize the layout. I'd like some of the text fields to be displayed on the same line but I don't find the correct identification for the elements and/or which CSS styling to use to achieve this very simple goal.
我不知道如何自定义布局。我希望一些文本字段显示在同一行上，但我没有找到元素的正确标识和/或使用哪种 CSS 样式来实现这个非常简单的目标。
Here is the code :
这是代码：
<div id="responsive-form" class="clearfix">
<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>
<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>
<label> How many guests?
[text your-guests] </label>
<div class="form-row">
<p>Number of adults [text your-adults]</p>
<p>Number of children under 6 years old [text your-little-children]</p>
<p>Number of children under 12 years old [text your-big-children]</p>
</div>
Select your preferred accomodation
[checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]
Do you need transportation to the hotel ?
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]
<label> Do you want us to arrange motorbike rental for you ?
[text your-motorbikes] </label>
<label> Tell us more about what brings you to Balian
[textarea your-message] </label>
[submit "Send"]
</div>I want to display the p elements of the form-row elements on a single line. I have tried this CSS line :
我想在一行上显示表单行元素的 p 元素。我试过这个 CSS 行：
.form_row p{
display: inline-block
}But it does not do anything. I feel I am missing something, can anybody help ?
但它没有做任何事情。我觉得我错过了一些东西，有人可以帮忙吗？
Many thanks in advance,
提前谢谢了，
Benjamin
本杰明
采纳答案by Daniel
You probably have a CSS rule that makes the <p>element full-width.
您可能有一个使<p>元素全宽的 CSS 规则。
Why not use <div>and use the theme's classes?
为什么不使用<div>和使用主题的类？
<div class="form-row">
<div class="grid-33">Number of adults [text your-adults]</div>
<div class="grid-33">Number of children under 6 years old [text your-little-children]</div >
<div class="grid-33">Number of children under 12 years old [text your-big-children]</div>
</div>
回答by aje
You can use your theme grid to make it in two column. see below snippet
您可以使用主题网格将其分成两列。见下面的片段
<div id="responsive-form" class="clearfix">
<div class="vc_row ">
<div class="vc_col-sm-6">
<label> Your Name (required)
[text* your-name] </label>
</div>
<div class="vc_col-sm-6">
<label> Your Email (required)
[email* your-email] </label>
</div>
</div>
<label> Arrival date
[date date-79 id:Arrivaldate date-format:mm/dd/yy] </label>
<label> Departure date
[date date-80 id:Departuredate date-format:mm/dd/yy] </label>
<label> How many guests?
[text your-guests] </label>
<div class="form-row">
<p>Number of adults [text your-adults]</p>
<p>Number of children under 6 years old [text your-little-children]</p>
<p>Number of children under 12 years old [text your-big-children]</p>
</div>
Select your preferred accomodation
[checkbox your-accomodation use_label_element "Wayan (Two-story villa)" "Kadek (Two-story villa)" "Nyoman (Garden bungalow)" "Kehut (Garden bungalow)" "Pasca (Garden bungalow)"]
Do you need transportation to the hotel ?
[radio your-pickup default:1 use_label_element exclusive "No transport needed" "Transport from Denpasar airport" "Transsport from Gilimanuk Ferry"]
<label> Do you want us to arrange motorbike rental for you ?
[text your-motorbikes] </label>
<label> Tell us more about what brings you to Balian
[textarea your-message] </label>
[submit "Send"]
</div>回答by pinakion
You can use an HTML table as follows :
您可以按如下方式使用 HTML 表格：
<table>
<tr>
<td>Number of adults [text your-adults]</td>
<td>Number of children under 6 years old [text your-little-children]</td>
<td>Number of children under 12 years old [text your-big-children]</td>
</tr>
</table>
回答by Aurovrata
I have been quite frustrated with the lack of design solutions for Contact Form 7. A year ago, I was tasked with creating multiple forms in cf7, with complex layout requirements. To solve this problem I set about creating a plugin that allows for responsive grid-layout designs as well as the ability to have a modular approach to form building, ie being able to reuse existing forms into larger form constructs. I just released the Smart Grid-layout design for CF7, it gives a grid UI editor in the dashboard that allows you to build a 3 columns layout in a single row. You don't need to mess around with css, the layout will be rendered on your page. It is also responsive, to it will default to 3 rows on a mobile phone.
我对 Contact Form 7 缺乏设计解决方案感到非常沮丧。一年前，我的任务是在 cf7 中创建多个具有复杂布局要求的表单。为了解决这个问题，我着手创建一个插件，该插件允许响应式网格布局设计以及具有模块化方法来构建表单的能力，即将现有表单重用于更大的表单构造。我刚刚发布了CF7的智能网格布局设计，它在仪表板中提供了一个网格 UI 编辑器，允许您在一行中构建 3 列布局。您不需要乱用 css，布局将呈现在您的页面上。它也是响应式的，在手机上默认为 3 行。
Give it a try and let me know what you think.
试一试，让我知道你的想法。
回答by Kemal Umut
Your code is working well for me, you just have a syntax error in your CSS. The name of your element in the HTML is form-rowbut in CSS you have written form_row. I just changed the CSS selector to form-rowand everything works as expected.
您的代码对我来说运行良好，只是您的 CSS 中有语法错误。HTML 中元素的名称form-row但是在 CSS 中是您编写的form_row。我只是将 CSS 选择器更改为form-row，一切都按预期工作。
.form-row p {
display: inline-block;
}
回答by sandeep autade
You can simply use HTML table structure!!!
您可以简单地使用 HTML 表格结构！！！
<table>
<tr>
<td colspan="2">[text* Name placeholder "Your Name"]</td>
</tr>
<tr>
<td>[text* Class placeholder "Enter Class"]
</td>
<td>
[text* Medium placeholder "Enter Medium"]
</td>
</tr>
</table>
[submit "Submit"]
回答by Juri Fab
Hope this video instruction will help you
Here is the CSS code for my contact form 7:
这是我的联系表格 7 的 CSS 代码：
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
display: table;
clear: both;
}
#knopka
{
color: #fffff;
background: #8F8CA0;
width: 90%;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}?
