如何將單選按鈕保持在同一行上

Question

我有一個帶有輸入框和單選按鈕的表單。如果我在跳轉到下一行的<td>中有長文本，則會影響第二個單選按鈕，使標籤和單選按鈕變爲堆疊。 看到現場代碼在這個小提琴http://jsfiddle.net/leopardy/bLnLwoht/

事情我已經嘗試：
- 如果我刪除長文本，例如刪除單詞「洲際」，這解決了我的問題，但我需要一個長字。
- 如果我將表單區域的寬度更改爲更大的值，例如500px，這也解決了我的問題，但我需要表單的寬度爲450px，輸入框的寬度爲200px。

此外，我希望能夠保持在同一行上，而不必將我的單選按鈕放在單獨的行上。理想情況下，我希望將單詞「已啓用」與其上方的輸入框對齊，然後是單選按鈕，後跟單詞「禁用」，後跟單選按鈕，並且所有這些都不通過輸入按鈕的右側邊界。有沒有辦法做到這一點？

我將在這裏添加代碼，以及：

CSS

.form_area { 
    height: auto; 
    width : 450px; 
} 
.inputs_table input[type="text"] { 
    width: 200px;  
} 

HTML

<div class="form_area"> 
<form id="create_form"> 
<div> 
    <table class="inputs_table"> 
     <tbody> 
      <tr> 
       <td>Name:</td> 
       <td> 
        <input name="name" id="name_input" type="text" > 
       </td> 
      </tr> 
      <tr> 
       <td>Intercontinental Location:</td> 
       <td> 
        <input id="location_input" type="text"> 
       </td> 
      </tr> 
      <tr> 
       <td>Feature:</td> 
       <td> 
        <label for="one">Enabled</label> 
        <input type="radio" id="input_enabled" name="feature" value="true"> 
       </td> 
       <td> 
        <label for="two">Disabled</label> 
        <input type="radio" id="input_disabled" name="feature" value="false" /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div></form></div> 

Answer 1

有一個簡單的解決這裏，把兩隻在同一個單選按鈕和標籤td。

因此改變：

<td> 
    <label for="one">Enabled</label> 
    <input type="radio" id="input_enabled" name="feature" value="true"> 
</td> 
<td> 
    <label for="two">Disabled</label> 
    <input type="radio" id="input_disabled" name="feature" value="false" /> 
</td> 

到：

<td> 
    <label for="one">Enabled</label> 
    <input type="radio" id="input_enabled" name="feature" value="true"> 
    <label for="two">Disabled</label> 
    <input type="radio" id="input_disabled" name="feature" value="false" /> 
</td> 

見here