单选按钮在表格单元格中未正确对齐答案

【问题标题】：radio button not aligned properly in table cell单选按钮在表格单元格中未正确对齐
【发布时间】：2017-01-27 21:29:04
【问题描述】：

我想在单选按钮中选择四个图像，但是，在生成单选按钮时，td 中的第一个图像总是比其他图像具有更大的宽度，并且单选按钮在图像旁边而不是在顶部图像，我怎样才能使第一张图像与 td 中的其他图像具有相同的宽度。这是我的代码：

             <td><input type="radio" name="emotion" id="SeVYzlSRmE.jpg"/>
                 <label for="SeVYzlSRmE.jpg"><img src="SeVYzlSRmE.jpg" alt="I'm sad" /></label>
             </td>

             <td><input type="radio" name="emotion" id="zSepCGRnUc.jpg"/>
                 <label for="zSepCGRnUc.jpg"><img src="zSepCGRnUc.jpg" alt="I'm sad" /></label>
             </td>

             <td><input type="radio" name="emotion" id="WkzJIGctSz.jpg"/>
                 <label for="WkzJIGctSz.jpg"><img src="WkzJIGctSz.jpg" alt="I'm sad" /></label>
             </td>

             <td><input type="radio" name="emotion" id="vsIClceVUI.jpg"/>
                 <label for="vsIClceVUI.jpg"><img src="vsIClceVUI.jpg" alt="I'm sad" /></label>
             </td>

        </tr>

这是前景图：

这是我使用的 css：
.multiline { 填充：0px；空白：预包装；高度：100px；宽度：50%；边距：0px }

.left-div {
    float: left;
    width: 50%;
    height: 100px;
    margin-right: 8px;
    background-color: linen;
    white-space: pre-wrap;
}
.right-div {
    margin-left: 108px;

}
.row {
  display: flex; /* equal height of the children */
}

.hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }

.spacer {height:4px; }

.beta {border-collapse:collapse; table-layout:fixed; width:1000px;}
table td {word-wrap:break-word;}
.alpha {width:300px;height:300px;}

【问题讨论】：

标签： html css radio-button

【解决方案1】：

试试下面的代码：

<style>
.box {
width: 50px;
float:right;}
</style>

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<table>
    <tr>
              <td><input type="radio" name="emotion" id="SeVYzlSRmE.jpg"/>
                 <label for="SeVYzlSRmE.jpg"><img class="box" src="SeVYzlSRmE.jpg" alt="I'm sad" /></label>
             </td>

             <td><input type="radio" name="emotion" id="zSepCGRnUc.jpg"/>
                 <label for="zSepCGRnUc.jpg"><img class="box" src="zSepCGRnUc.jpg" alt="I'm sad" /></label>
             </td>

             <td><input type="radio" name="emotion" id="WkzJIGctSz.jpg"/>
                 <label for="WkzJIGctSz.jpg"><img class="box" src="WkzJIGctSz.jpg" alt="I'm sad" /></label>
             </td>

             <td><input type="radio" name="emotion" id="vsIClceVUI.jpg"/>
                 <label for="vsIClceVUI.jpg"><img class="box" src="vsIClceVUI.jpg" alt="I'm sad" /></label>
             </td>
         </tr>
</table>
</body>
</html>

【讨论】：

【解决方案2】：

试试这个：

.some_class td{
	position:relative;
}
.some_class td input{
	position:absolute;
    top:34%;
    left:0;
}
.some_class td label img{
	display:inline-block;
    padding-left:20px;
}

<table class="some_class">
<tr>
	<td>
		<input type="radio" name="emotion" id="SeVYzlSRmE.jpg"/>
		<label for="SeVYzlSRmE.jpg">
		<img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&amp;g=1" width="64" height="64" alt="Feel Happy" />
		</label>
	</td>

	<td>
		<input type="radio" name="emotion" id="zSepCGRnUc.jpg"/>
		<label for="zSepCGRnUc.jpg"><img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&amp;g=1" width="64" height="64" alt="Feel Happy" /></label>
	</td>
	<td>
		<input type="radio" name="emotion" id="WkzJIGctSz.jpg"/>
		<label for="WkzJIGctSz.jpg"><img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&amp;g=1" width="64" height="64" alt="Feel Happy" /></label>
	</td>

	<td>
		<input type="radio" name="emotion" id="vsIClceVUI.jpg"/>
		<label for="vsIClceVUI.jpg"><img alt="" src="https://i.stack.imgur.com/aSXYu.jpg?s=64&amp;g=1" width="64" height="64" alt="Feel Happy" /></label>
	</td>
</tr>
</table>

【讨论】：

【解决方案3】：

您是否尝试过在每个元素上设置浮点数？在 CSS 中，定义一个类并添加如下内容：

.box {
width: 50px;
float:left;}

【讨论】：