Question

我想要在单选按钮中选择四个图像，但是，在生成单选按钮时，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 { 填充：0像素; 白色空间：预包装; 身高：100px; 宽度：50％; margein：0像素 }

.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;}

Answer 1

你能分享用来设置这些方框样式的CSS。

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

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

Answer 2

试试这个：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

尝试以下代码：

<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>

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

3 个答案: