simple_form_for，具有在同一行上的標籤和輸入

Question

當我創建simple_form_for一種形式，它把標籤和輸入的下方，如下所示：

名稱
_ _

但我想他們是：

名_ _

如果我看着生成的HTML，我看到：

<div class="input string optional name"> 
    <label class="string optional" for="name">date from</label> 
    <input class="string optional" id="name" name="anf[name]" size="50" type="text" value=""> 
</div> 

，但我不明白的地方，在款式，有這使得它打破了線的設置;這是它的計算風格：

color: rgb(51, 51, 51); 
display: block; 
font-family: verdana, arial, helvetica, sans-serif; 
font-size: 13px; 
height: 65px; 
line-height: 18px; 
width: 940px; 

無論如何，有沒有辦法來定製這個simple_form_for的外觀？

Answer 1

下面是我用在標籤和輸入都在同一行SimpleForm例子...

HTML

<%= simple_form_for(@proteam) do |f| %> 
    <%= f.input :name %> 
    <%= f.input :city %> 
    <%= f.input :mascot %> 
    <%= f.button :submit %> 
<% end %> 

CSS

.simple_form label { 
    float: left; 
    width: 100px; 
    text-align: right; 
    margin: 2px 10px; 
} 

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

這基本上來自http://railscasts.com/episodes/234-simple-form-revised

Answer 2

我想這是規則

display: block; 

將其更改爲

display: inline 

，以防止標籤打破了線。