2015-09-18 37 views
-1

我不是發生了什麼,但這裏是我的HTML;表中的水平中心單選按鈕

<tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'> 
    <td class="answer_cell_003 answer-item radio-item"> 
    <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label> 
    <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
    </td> 
</tr> 

我想中央對齊單選按鈕,但只是停留在左側。到目前爲止,我嘗試過類似的東西;

table td .radio { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;} 
table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;} 

它會承認border屬性。並顯示一個紅色的邊框,所以我知道它被正確地引用。

我在做什麼錯?

UPDATE;更多的代碼

table td .radio { border:1px solid red;display: block;margin:0 auto;} 
 
    table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}
\t <table class="question subquestions-list questions-list " summary="An array with sub-question on each line. The answers are contained in the table header. "> 
 
\t \t <colgroup class="col-responses"> 
 
\t \t <col class="col-answers" width="50%%" /> 
 
\t <col class="odd" width="10%" /> 
 
\t <col class="even" width="10%" /> 
 
\t <col class="odd" width="10%" /> 
 
\t <col class="even" width="10%" /> 
 
\t <col class="odd" width="10%" /> 
 
\t \t </colgroup> 
 
\t \t <thead><tr class="dontread"> 
 
\t \t <td>&nbsp;</td> 
 
\t \t <th>Strongly agree</th> 
 
\t \t <th>Agree</th> 
 
\t \t <th>Neither agree nor disagree</th> 
 
\t \t <th>Disagree</th> 
 
\t \t <th>Strongly disagree</th> 
 
\t </tr></thead> 
 
\t \t 
 
\t <tbody> 
 
\t 
 
\t \t <tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'> 
 
\t \t <th class="answertext"> 
 
\t a. One.<input type="hidden" name="java158311X2059X38315A008" id="java158311X2059X38315A008" value="" /> 
 
\t \t </th> 
 
\t \t \t \t <td class="answer_cell_001 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A008-1">Strongly agree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A008" value="1" id="answer158311X2059X38315A008-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_002 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A008-2">Agree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A008" value="2" id="answer158311X2059X38315A008-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_003 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_004 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A008-4">Disagree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A008" value="4" id="answer158311X2059X38315A008-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_005 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A008-5">Strongly disagree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A008" value="5" id="answer158311X2059X38315A008-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t </tr> 
 
\t 
 
\t 
 
\t \t <tr id='javatbd158311X2059X38315A603' class='array1 answers-list radio-list'> 
 
\t \t <th class="answertext"> 
 
\t b. Two.<input type="hidden" name="java158311X2059X38315A603" id="java158311X2059X38315A603" value="" /> 
 
\t \t </th> 
 
\t \t \t \t <td class="answer_cell_001 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A603-1">Strongly agree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A603" value="1" id="answer158311X2059X38315A603-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_002 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A603-2">Agree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A603" value="2" id="answer158311X2059X38315A603-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_003 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A603-3">Neither agree nor disagree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A603" value="3" id="answer158311X2059X38315A603-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_004 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A603-4">Disagree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A603" value="4" id="answer158311X2059X38315A603-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t \t \t \t <td class="answer_cell_005 answer-item radio-item"> 
 
\t <label class="hide read" for="answer158311X2059X38315A603-5">Strongly disagree</label> 
 
\t \t <input class="radio" type="radio" name="158311X2059X38315A603" value="5" id="answer158311X2059X38315A603-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
\t \t </td> 
 
\t </tr> 
 
\t </tbody> 
 
\t </table> 
 

+0

在您的示例代碼,加入紅色邊框到兩個'.radio'和'表TR td'有點混亂。不同顏色的邊界可能會讓事情變得更加清晰。 –

回答

2

製作單選按鈕作爲塊元件。

display:block

table td .radio { border:1px solid red;display: block;margin:0 auto;} 
 
table tr td { text-align:center; margin-left:auto; margin-right:auto; border:1px solid red;}
<table> 
 
\t <tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'> 
 
    <td class="answer_cell_003 answer-item radio-item"> 
 
    <label class="hide read" for="answer158311X2059X38315A008-3">Neither agree nor disagree</label> 
 
    
 
    <input class="radio" type="radio" name="158311X2059X38315A008" value="3" id="answer158311X2059X38315A008-3" title="Neither agree nor disagree" onclick="checkconditions(this.value, this.name, this.type)" /> 
 
    </td> 
 
    </tr> 
 
</table>

+0

好主意。但那並不奏效。它仍然在左邊.. – mikelovelyuk

+0

^轉發您的代碼..這適用於我;) –

+0

@ mike3875可能是你使用'float:right'你應該檢查一次。 –

-1

給輸入顯示塊

u can find the code here 
[https://jsfiddle.net/u85mca3d/][1] 
+0

雖然這可能在理論上回答這個問題,[**這將是可取的**](/ meta.stackoverflow.com/q/8259)包括的基本部分答案在這裏,並提供參考鏈接。如果鏈接頁面更改,則僅鏈接答案可能會失效 –