HTML

Question

我试图将所有表单元素居中对齐在一个用simple_form构建的表单中，所以我创建了一个.simple_form并填充了某些东西，比如float，text-align等，以使所有东西都居中但是它不起作用

.simple_form {
    float: none;
    text-align : center;
    margin-right: auto;
    margin-left: auto;
    position: auto;
}
/*
.simple_form label {
  float: left;  
  width: 100px;   
  margin: 2px 10px; 
}  

.simple_form div.input {  
  margin-bottom: 10px;  
  margin: 2px 10px; 
}  

.simple_form div.boolean, .simple_form input[type='submit'] {  
  margin-left: 120px; 
  margin: 2px 10px; 
}  

.simple_form div.boolean label {  
  float: none;  
  margin: 0; 
  margin: 2px 10px; 
} 
*/

HTML

<h1>Submit page </h1>
<%= simple_form_for Post.new  do |f| %> 
<%= f.input :title  %>
<%= f.input :blurb %> 
<%= f.input :funding_goal %>
<%= f.input :funding_duration %>   
<%= f.button :submit %>  
<% end %>

Answer 1

FIDDLE

将display:inline-block提供给输入标记。

所以，CSS将是：

.simple_form {
    float: none;
    text-align : center;
    border: 1px solid #CCC;
}
.simple_form .input-box {
    margin-bottom: 10px;
}
.simple_form input {
    margin-bottom: 10px;
    margin: 2px 10px;
    display: inline-block;
}

HTML应该是：

<form class="simple_form">
  <div class="input-box">
    <input type="text" />
  </div>
  <div class="input-box">
    <input type="text" />
  </div>
  <div class="input-box">
    <input type="text" />
  </div>
  <input type="submit" />
</form>

如何在simple_form中居中对齐表单元素

HTML

1 个答案: