Breaking a <form> tag between different table columns

Question

I have a <form> which I am using within a very simple table structure, which is attempting to be as simple as the following fiddle:

https://jsfiddle.net/avrahamcool/LDnfQ/

I similarly am trying to create three columns in a row that spans 100% of the viewport, each of which resize automatically based on the size of the viewport so that they are evenly distributed across the length of the viewport.

I currently have a haml structure which is unfortunately complicated by the fact that I am breaking up a <form> and its <input> 's across the three columns. I don't know how to preserve the <form> scope across the three child <div> s of the row with out messing with the desired CSS behavior of each column acting like a proper column of a 1/3 of the size.

Past a certain viewport size, the column width is not distributed evenly in my implementation of the Table like structure where as in the first fiddle it is.

Here is my .haml

.front-page-test

  =form_for :proficiency_test do |f|
    .column-test
      =f.label :first_name, 'First Name'
      %br
      =f.text_field :first_name
      %br
      =f.label :family_name, 'Family Name'
      %br
      =f.text_field :family_name
      %br
    .column-test
      -@country = 
      -right_countries = @country.collect{|x| [x,x]}
      =f.select(:country, right_countries, :prompt => "Select a Country")
      %br
      =f.label :email, 'Your Email'
      %br
      =f.text_field :email
    .column-test
      %br
      = f.label :agency?, "Are you working with an agency?"
      %br
      = f.label :agency?, "Yes", value: "true"
      = f.radio_button :agency?, true
      = f.label :agency?, "No", value:"false"
      = f.radio_button :agency?, false 
      %br
      =f.label :agency_name, 'If so what is your agency\'s name?'
      %br
      =f.text_field :agency_name
      %br
      =f.submit "Submit"

      .all-caps
        ENGLISH PROFICIENCY TEST

with the following CSS:

.front-page-test{
 width:100%;
  display: table;
 table-layout: fixed;
 border-spacing: 20px;
 padding:40px;
background:#3ab9a0;
position:relative;
 top:-60px;
 color:white;
 height:200px;
 overflow:hidden;
}
.column-test{
  display: table-cell;
 width:30%;
 }

Here is the fiddle:

https://jsfiddle.net/Lkxh4hgy/

Answer 1

将.column-test更改为display: inline-block可解决此问题： https display: inline-block .column-test