此提交按鈕可以移動嗎？

Question

在this JSfiddle我沒有使用表格做了一個表單。

問題是我無法在「類型」和「結束數據」字段下的同一行上獲取提交按鈕。

有誰知道該怎麼做？

HTML

<div class="create-new"> 
    <div id="create_result" style="display:none;"> 
    </div> 
    <form id="create_form" name="create_form" action="" method="post"> 
     <input name="anchor" id="anchor" value="create" type="hidden"> 

     <label class="new" for="title">Title:</label> 
     <input class="new" type="text" name="title" id="title" /> 

     <label class="new" for="owner">Owner:</label> 
     <input class="new" type="text" name="owner" id="owner" /><br class="new"/> 

     <label class="new" for="users">Users:</label> 
     <input class="new" type="text" name="users" id="users"/> 


     <label class="new" for="groups">Groups:</label> 
     <input class="new" type="text" name="groups" id="groups" /><br class="new"/> 

     <label class="new" for="begin_date">Begin Date:</label> 
     <input class="new" type="text" id="from" name="from"/> 

     <label class="new" for="end_date">End Date:</label> 
     <input class="new" type="text" id="to" name="to"/><br class="new"/> 

     <label class="new" for="type">Type:</label> 

     <input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel <br/> 
     <input name="ctype" id="ctypee" value="course" type="radio" /> Course <br/> 

     <button class="n" type="submit">Create</button> 
    </form> 
</div> 

CSS這樣做將是把物品放入一個列表（UL）

label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; } 
label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; } 
textarea.new { height: 50px; } 
br.new { clear: left; } 
i nput.n { display: block; float: right; width: 150px; } 
.create-new { display: inline-block; position: relative; left: 25%; } 

Answer 1

我改變input.n到button.n和調整樣式display:inline

button.n { display: inline; float: right; width: 150px; }

我也感動於你的代碼的按鈕放置到右側的標籤

<label class="new" for="type">Type:</label> 

<button class="n" type="submit">Create</button> 

<input name="ctype" id="ctype" value="individuel" type="radio" /> Individuel 

http://jsfiddle.net/jasongennaro/CKC29/

下

Answer 2

的一種方式，然後在你的CSS設置display: inline;你想這兩個元素在同一條線上。

Answer 3

你可以試試這個：

，以便它一樣的標籤button.n選擇添加到前兩個標籤線之上，以便與類型的標籤。

button.n, label.new, input.new, select.new, textarea.new { display: block; float: left; width: 150px; margin-bottom: 10px; } 
button.n, label.new { width: 110px; text-align: right; padding-right: 10px; margin-top: 2px; } 

如果n類名是在你的代碼一個錯字同上，只是採取正確的類名，可能是new代替n。

Answer 4

做它只改變CSS的唯一方法是設置「顯示：內聯」爲你提交按鈕之前的輸入。