單選按鈕未正確對齊

-1

<table> 
       <tr style="background:#CCCCCC"> 
        <td> 
         <input id="Radio1" name="G1M" value="1" type="radio" /><br /> 
         <input id="Radio2" name="G1M" value="2" type="radio" /><br /> 
         <input id="Radio3" name="G1M" value="3" type="radio" /><br /> 
         <input id="Radio4" name="G1M" value="4" type="radio" /> 
        </td> 
        <td> 
         <input id="Radio5" name="G1L" value="1" type="radio" />Gentle or kindly<br /> 
         <input id="Radio6" name="G1L" value="2" type="radio" />Persuasive, convincing<br /> 
         <input id="Radio7" name="G1L" value="3" type="radio" />Humble, reserved, modest<br /> 
         <input id="Radio8" name="G1L" value="4" type="radio" />Original, inventive, individualistic 
        </td> 
       </tr> 
</table>

在該頁面中，兩組單選按鈕相互間出現，每個按鈕每列1列，4列深。但是，由於第二組文本後面有文本，所以單選按鈕之間的擴展比第一組按鈕之間的擴展更寬。我不想在第一組之後添加文本，我只是嘗試使用空格。有沒有更好的方式來格式化這兩個並排的單選按鈕集？單選按鈕未正確對齊

來源

2010-08-24 user558594

您可以在每個第一個單選按鈕 - 「 ' – Oded 2010-08-24 20:16:06

把它們放在單獨的<tr> s。

來源

2010-08-24 20:16:09

之後始終放置一個非休息空間他不想讓它們並排嗎？這不會有幫助，是嗎？ – Stephen 2010-08-24 20:18:08

'
'表明他希望他們一個在另一個下。 – 2010-08-24 20:24:41

也許你應該使用更多的列到你的表中，以及更多的行。而且你應該使用別的東西（比如CSS），但是不要讓我開始。

<table> 
    <tr> 
     <td><input id="Radio1" name="G1M" value="1" type="radio" /></td> 
     <td><input id="Radio5" name="G1L" value="1" type="radio" /></td> 
     <td>Gentle or kindly</td> 
    </tr> 
    <tr> 
     <td><input id="Radio2" name="G1M" value="2" type="radio" /></td> 
     <td><input id="Radio6" name="G1L" value="2" type="radio" /></td> 
     <td>Persuasive, convincing</td> 
    </tr> 
    <tr> 
     <td><input id="Radio3" name="G1M" value="3" type="radio" /></td> 
     <td><input id="Radio7" name="G1L" value="3" type="radio" /></td> 
     <td>Humble, reserved, modest</td> 
    </tr> 
    <tr> 
     <td><input id="Radio4" name="G1M" value="4" type="radio" /></td> 
     <td><input id="Radio8" name="G1L" value="4" type="radio" /></td> 
     <td>Original, inventive, individualistic</td> 
    </tr> 
</table>

這<table>中有每個選項一行，並有一個<td>每個單選按鈕，文本一個<td>。

您也可以使用CSS和<div>代替。

<style> 
input[type='radio'].spaceRight { 
    margin-right: 10px; 
} 
</style> 

<!-- do this for each row --> 
<div> 
    <input class="spaceRight" id="Radio1" name="G1M" value="1" type="radio" /> 
    <input class="spaceRight" id="Radio2" name="G1M" value="2" type="radio" /> 
    Gentle or kindly 
</div>

來源

2010-08-24 20:18:45 zneak

使用CSS的+1 – emilebaizel 2012-08-14 18:43:03

<table> 
      <tbody><tr style="background: none repeat scroll 0% 0% rgb(204, 204, 204);"> 
       <td> 
        <input type="radio" id="Radio1" name="G1M" value="1">&nbsp;<br> 
        <input type="radio" id="Radio2" name="G1M" value="2">&nbsp;<br> 
        <input type="radio" id="Radio3" name="G1M" value="3">&nbsp;<br> 
        <input type="radio" id="Radio4" name="G1M" value="4">&nbsp; 
       </td> 
       <td> 
        <input type="radio" value="1" name="G1L" id="Radio5">Gentle or kindly<br> 
        <input type="radio" value="2" name="G1L" id="Radio6">Persuasive, convincing<br> 
        <input type="radio" value="3" name="G1L" id="Radio7">Humble, reserved, modest<br> 
        <input type="radio" value="4" name="G1L" id="Radio8">Original, inventive, individualistic 
       </td> 
      </tr>

來源

2010-08-24 20:24:52

設置第一<td>的寬度。如果您的第二個<td>寬度小於單選按鈕後的實際文字寬度，則將它們放在單獨的<tr>之內是您需要執行的操作。但是我喜歡@zneak所說的話，你可能會讓某人開始說說爲什麼你不應該使用表格？ :)

來源

2010-08-24 20:34:02 AMIT

單選按鈕未正確對齊

回答

相關問題