Ben*_*min 5 css wordpress form-layout contact-form-7
我正在使用联系表7来设计酒店的预订表。
我不知道如何自定义布局。我希望某些文本字段显示在同一行上,但是我找不到元素的正确标识和/或用于实现此非常简单目标的CSS样式。
这是代码:
<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>
Run Code Online (Sandbox Code Playgroud)
我想在一行上显示form-row元素的p元素。我已经尝试过此CSS行:
.form_row p{
display: inline-block
}
Run Code Online (Sandbox Code Playgroud)
但是它什么也没做。我觉得我缺少了什么,有人可以帮忙吗?
提前谢谢了,
本杰明
您可能有一个使<p>
元素全宽的 CSS 规则。
为什么不使用<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>
Run Code Online (Sandbox Code Playgroud)
您可以简单地使用 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"]
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
28286 次 |
最近记录: |