Question

我在一个非常简单的表结构中使用了<form>，它试图像下面的小提琴一样简单：

我同样尝试在一行中创建三个跨越100％视口的列，每个列根据视口的大小自动调整大小，以便它们均匀分布在视口的整个长度上。

我目前有一个haml结构，不幸的是，我在三列中分解了<form>及其<input>这一事实。我不知道如何在行的三个子<form>中保留<div>范围，而没有弄清每个列的所需CSS行为，就像1/3的正确列一样尺寸。

通过某个视口大小，列宽度不会在我的表格结构中均匀分布，就像在第一个小提琴中一样。

这是我的.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

使用以下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%;
 }

这是小提琴：

https://jsfiddle.net/Lkxh4hgy/

Answer 1

将.column-test改为让display: inline-block在这个小提琴中解决它：https://jsfiddle.net/Lkxh4hgy/1/

在不同的表列之间打破<form>标记

1 个答案: