如何将 Web 表单分成两列？

Question

我对 HTML5 很陌生。 Zoho CRM 生成了一个 HTML5 代码，它允许我使用 CRM“创建帐户”流程在我的页面上嵌入一个 Web 表单。它工作正常，但字段在一列中，我想将它们分成两列。

我需要修改什么？

字段（在一列中）是：

  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='First_Name'>Nombre<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Last_Name'>Apellido<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Last_Name' name='Last Name' maxlength='80'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Mobile'>Número Móvil<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Mobile' name='Mobile' maxlength='30'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Country'>País<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Country' name='Country' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Email'>Correo Electrónico<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' ftype='email' id='Email' name='Email' maxlength='100'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Street'>Kgs cosechados promedio mes<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Street' name='Street' maxlength='250'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Company'>Nombre de la Pisc&iacute;cola</label></div><div class='zcwf_col_fld'><input type='text' id='Company' name='Company' maxlength='200'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Description'>Comentarios</label></div><div class='zcwf_col_fld'><textarea id='Description' name='Description'></textarea><div class='zcwf_col_help'></div></div></div>

如何将 Web 表单分成两列？

Answer 1

有一个 CSS 属性 栏目，这可能是您想要的：

form {
  columns: 2;
}

<form>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='First_Name'>Nombre<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Last_Name'>Apellido<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Last_Name' name='Last Name' maxlength='80'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Mobile'>Número Móvil<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Mobile' name='Mobile' maxlength='30'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Country'>País<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Country' name='Country' maxlength='100'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Email'>Correo Electrónico<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' ftype='email' id='Email' name='Email' maxlength='100'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Street'>Kgs cosechados promedio mes<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Street' name='Street' maxlength='250'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Company'>Nombre de la Pisc&iacute;cola</label></div>
    <div class='zcwf_col_fld'><input type='text' id='Company' name='Company' maxlength='200'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Description'>Comentarios</label></div>
    <div class='zcwf_col_fld'><textarea id='Description' name='Description'></textarea>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
</form>

或者，如果您希望内容不是沿着第一列向下流动，然后向下流动到第二列，而是从左到右然后向下流动到下一行，您可以查看 flex 或 grid。

这是一个简单的网格。当然你会想要添加一些东西来给出正确的宽度等等：

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

<form>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='First_Name'>Nombre<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Last_Name'>Apellido<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Last_Name' name='Last Name' maxlength='80'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Mobile'>Número Móvil<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Mobile' name='Mobile' maxlength='30'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Country'>País<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Country' name='Country' maxlength='100'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Email'>Correo Electrónico<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' ftype='email' id='Email' name='Email' maxlength='100'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Street'>Kgs cosechados promedio mes<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='Street' name='Street' maxlength='250'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Company'>Nombre de la Pisc&iacute;cola</label></div>
    <div class='zcwf_col_fld'><input type='text' id='Company' name='Company' maxlength='200'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Description'>Comentarios</label></div>
    <div class='zcwf_col_fld'><textarea id='Description' name='Description'></textarea>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
</form>