表中的水平中心单选按钮

时间：2015-09-18 11:00:24

标签： html css alignment

我不是发生了什么，但这是我的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;}
	<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>&nbsp;</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>

2 个答案:

答案 0 :(得分：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>
	<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>

答案 1 :(得分：-1)

给出输入显示块

u can find the code here
 [https://jsfiddle.net/u85mca3d/][1]
相关问题
最新问题