表格中的水平中心单选按钮 [英] Horizontal Center Radio Button in Table
本文介绍了表格中的水平中心单选按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不是怎么回事，但这是我的HTML;
< tr id ='javatbd158311X2059X38315A008'class =' array2答案列表单选列表'>
< td class = answer_cell_003答案项目单选项目>
< label class = hide read for = answer158311X2059X38315A008-3>既不同意也不反对< / label>
< input class = radio type = radio name = 158311X2059X38315A008 value = 3 id = answer158311X2059X38315A008-3 title =既不同意也不反对 onclick = checkconditions（this.value ，this.name，this.type） />
< / td>
< / tr>
我正在尝试将单选按钮居中对齐，但只停留在左侧。到目前为止，我已经尝试过类似的事情；
table td .radio {text-align：center; margin-left：auto;右边距：自动； border：1px纯红色；}
表tr td {text-align：center; margin-left：auto;右边距：自动； border：1px纯红色；}
它将确认边界属性。并显示一个红色边框，所以我知道它被正确引用了。
我在做什么错了？
更新;更多代码
< pre class = snippet-code-css lang-css prettyprint-override>
table td .radio {border：1px solid red; display：block; margin：0 auto;} table tr td {text-居中对齐; margin-left：auto;右边距：自动； border：1px纯红色；}
< table class = " subquestions-listquestions-list" summary =每行上都有子问题的数组。答案包含在表头中。 < colgroup class = col-responses> < col class = col-answers width = 50 %% /> < col class = odd width = 10％ /> < col class = even width = 10％ /> < col class = odd width = 10％ /> < col class = even width = 10％ /> < col class = odd width = 10％ /> < / colgroup> < thead>< tr class = dontread> < td>& nbsp;< / td> < th>完全同意< / th> <同意> / th < th>既不同意也不反对< th>不同意< / th> < th>完全不同意< / th> < / tr>< / thead> < tbody> < tr id ='javatbd158311X2059X38315A008'class ='array2 answers-list radio-list'> < th class = answertext>一个。 <输入类型=隐藏 name = java158311X2059X38315A008 id = java158311X2059X38315A008 value = /> < / th> < td class = answer_cell_001 answer-item radio-item> < label class = hide read for = answer158311X2059X38315A008-1>完全同意< / label> < input class = radio type = radio name = 158311X2059X38315A008 value = 1 id = answer158311X2059X38315A008-1 title =强烈同意 onclick =检查条件（this.value，this.name，this .type） /> < / td> < td class = answer_cell_002答案项目单选项目> < label class =隐藏阅读，用于= answer158311X2059X38315A008-2>同意< / label> < input class = radio type = radio name = 158311X2059X38315A008 value = 2 id = answer158311X2059X38315A008-2 title =同意 onclick =检查条件（this.value，this.name，this。类型） /> < / td> < td class = answer_cell_003答案项目单选项目> < label class = hide read for = answer158311X2059X38315A008-3>既不同意也不反对< / label> < input class = radio type = radio name = 158311X2059X38315A008 value = 3 id = answer158311X2059X38315A008-3 title =既不同意也不反对 onclick = checkconditions（this.value，this.name ，this.type） /> < / td> < td class = answer_cell_004答案项目单选项目> < label class =隐藏阅读，用于= answer158311X2059X38315A008-4>不同意< / label> < input class = radio type = radio name = 158311X2059X38315A008 value = 4 id = answer158311X2059X38315A008-4 title =不同意 onclick =检查条件（this.value，this.name，this。类型） /> < / td> < td class = answer_cell_005 answer-item radio-item> < label class = hide read for = answer158311X2059X38315A008-5>强烈不同意< / label> < input class = radio type = radio name = 158311X2059X38315A008 value = 5 id = answer158311X2059X38315A008-5 title =强烈不同意 onclick =检查条件（this.value，this.name，this .type） /> < / td> < / tr> < tr id ='javatbd158311X2059X38315A603'class ='array1 answers-list radio-list'> < th class = answertext> b。 < input type = hidden name = java158311X2059X38315A603 id = java158311X2059X38315A603 value = /> < / th> < td class = answer_cell_001 answer-item radio-item> < label class = hide read for = answer158311X2059X38315A603-1>完全同意< / label> < input class = radio type = radio name = 158311X2059X38315A603 value = 1 id = answer158311X2059X38315A603-1 title =强烈同意 onclick =检查条件（this.value，this.name，this .type） /> < / td> < td class = answer_cell_002答案项目单选项目> < label class =隐藏阅读，用于= answer158311X2059X38315A603-2>同意< / label> < input class = radio type = radio name = 158311X2059X38315A603 value = 2 id = answer158311X2059X38315A603-2 title =同意 onclick =检查条件（this.value，this.name，this。类型） /> < / td> < td class = answer_cell_003答案项目单选项目> < label class = hide read for = answer158311X2059X38315A603-3>既不同意也不反对< / label> < input class = radio type = radio name = 158311X2059X38315A603 value = 3 id = answer158311X2059X38315A603-3 title =既不同意也不反对 onclick = checkconditions（this.value，this.name ，this.type） /> < / td> < td class = answer_cell_004答案项目单选项目> < label class =隐藏阅读，用于= answer158311X2059X38315A603-4>不同意< / label> < input class = radio type = radio name = 158311X2059X38315A603 value = 4 id = answer158311X2059X38315A603-4 title =不同意 onclick = checkconditions（this.value，this.name，this。类型） /> < / td> < td class = answer_cell_005 answer-item radio-item> < label class = hide read for = answer158311X2059X38315A603-5>强烈不同意< / label> < input class = radio type = radio name = 158311X2059X38315A603 value = 5 id = answer158311X2059X38315A603-5 title =强烈不同意 onclick =检查条件（this.value，this.name，this .type） /> < / td> < / tr> < / tbody> < / table>
解决方案
设置单选按钮
display：block
table td .radio {边框：1像素，红色；显示：阻止；利润：0自动；} table tr td {text-align：center; margin-left：auto;右边距：自动； border：1px纯红色；}
< table> < tr id ='javatbd158311X2059X38315A008'class ='array2 answers-list radio-list'> < td class = answer_cell_003答案项目单选项目> < label class = hide read for = answer158311X2059X38315A008-3>既不同意也不反对< / label> < input class = radio type = radio name = 158311X2059X38315A008 value = 3 id = answer158311X2059X38315A008-3 title =既不同意也不反对 onclick = checkconditions（this.value，this.name ，this.type） /> < / td> < / tr>< / table>
I'm not what happening but here is my 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>
I'm trying to center-align the radio button but just stays on the left. So far I have tried things like;
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;}
It will acknowledge the border property. and display a red border, so I know it's being referenced correctly.
What am I doing wrong?
UPDATE; MORE CODE
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 class="question subquestions-list questions-list " summary="An array with sub-question on each line. The answers are contained in the table header. ">
<colgroup class="col-responses">
<col class="col-answers" width="50%%" />
<col class="odd" width="10%" />
<col class="even" width="10%" />
<col class="odd" width="10%" />
<col class="even" width="10%" />
<col class="odd" width="10%" />
</colgroup>
<thead><tr class="dontread">
<td> </td>
<th>Strongly agree</th>
<th>Agree</th>
<th>Neither agree nor disagree</th>
<th>Disagree</th>
<th>Strongly disagree</th>
</tr></thead>
<tbody>
<tr id='javatbd158311X2059X38315A008' class='array2 answers-list radio-list'>
<th class="answertext">
a. One.<input type="hidden" name="java158311X2059X38315A008" id="java158311X2059X38315A008" value="" />
</th>
<td class="answer_cell_001 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A008-1">Strongly agree</label>
<input class="radio" type="radio" name="158311X2059X38315A008" value="1" id="answer158311X2059X38315A008-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
<td class="answer_cell_002 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A008-2">Agree</label>
<input class="radio" type="radio" name="158311X2059X38315A008" value="2" id="answer158311X2059X38315A008-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
<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>
<td class="answer_cell_004 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A008-4">Disagree</label>
<input class="radio" type="radio" name="158311X2059X38315A008" value="4" id="answer158311X2059X38315A008-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
<td class="answer_cell_005 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A008-5">Strongly disagree</label>
<input class="radio" type="radio" name="158311X2059X38315A008" value="5" id="answer158311X2059X38315A008-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
</tr>
<tr id='javatbd158311X2059X38315A603' class='array1 answers-list radio-list'>
<th class="answertext">
b. Two.<input type="hidden" name="java158311X2059X38315A603" id="java158311X2059X38315A603" value="" />
</th>
<td class="answer_cell_001 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A603-1">Strongly agree</label>
<input class="radio" type="radio" name="158311X2059X38315A603" value="1" id="answer158311X2059X38315A603-1" title="Strongly agree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
<td class="answer_cell_002 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A603-2">Agree</label>
<input class="radio" type="radio" name="158311X2059X38315A603" value="2" id="answer158311X2059X38315A603-2" title="Agree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
<td class="answer_cell_003 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A603-3">Neither agree nor disagree</label>
<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)" />
</td>
<td class="answer_cell_004 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A603-4">Disagree</label>
<input class="radio" type="radio" name="158311X2059X38315A603" value="4" id="answer158311X2059X38315A603-4" title="Disagree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
<td class="answer_cell_005 answer-item radio-item">
<label class="hide read" for="answer158311X2059X38315A603-5">Strongly disagree</label>
<input class="radio" type="radio" name="158311X2059X38315A603" value="5" id="answer158311X2059X38315A603-5" title="Strongly disagree" onclick="checkconditions(this.value, this.name, this.type)" />
</td>
</tr>
</tbody>
</table>
解决方案
Make radio button as a block element.
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>
<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>
这篇关于表格中的水平中心单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
