我想中心對齊使用simple_form構建的表單中的所有表單元素，所以我創建了一個.simple_form並填充了某些東西，如float，text-align等，這是行不通的如何居中對齊simple_form中的表單元素

.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 %>

來源

2014-08-28 Programmer345

使用

標籤，但它在HTML不支持5 – 2014-08-28 08:32:04

是，是越來越產生什麼HTML？ – 2014-08-28 08:36:16

你有沒有工作的例子somwhere？或用你的代碼http://jsfiddle.net？ 'position：auto'也不是有效的CSS樣式。您可能需要將樣式應用到它的父容器以使其工作 – haxxxton 2014-08-28 08:37:10

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>

來源

2014-08-28 09:25:41 Husen

如何居中對齊simple_form中的表單元素

HTML

回答

相關問題