联系表格 7 - 同一行上的多个文本字段

Question

我正在使用联系表 7 来设计酒店的预订表。

http://istanabalian.com/book/

我不知道如何自定义布局。我希望某些文本字段显示在同一行，但我找不到元素的正确标识和/或使用哪种 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>

我想在一行上显示表单行元素的 p 元素。我试过这个 CSS 行：

 .form_row p{
display: inline-block
}

但它什么也没做。我觉得我错过了什么，有人可以帮忙吗？

提前谢谢了，

本杰明

原文由 Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可能有一个 CSS 规则使 <p> 元素全宽。

为什么不使用 <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>

原文由 Daniel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你可以简单地使用 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"]

原文由 sandeep autade 发布，翻译遵循 CC BY-SA 4.0 许可协议