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

问题描述：

我希望在单选按钮中有四个图像供选择，但是，在生成单选按钮时，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像素; white-space：pre-wrap; height：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;}

答

你能分享用于设计这些箱子的CSS。

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

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

答

试试这个：

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

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

 
\t <td> 
 
\t \t <input type="radio" name="emotion" id="zSepCGRnUc.jpg"/> 
 
\t \t <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> 
 
\t </td> 
 
\t <td> 
 
\t \t <input type="radio" name="emotion" id="WkzJIGctSz.jpg"/> 
 
\t \t <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> 
 
\t </td> 
 

 
\t <td> 
 
\t \t <input type="radio" name="emotion" id="vsIClceVUI.jpg"/> 
 
\t \t <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> 
 
\t </td> 
 
</tr> 
 
</table>

答

试试下面的代码：

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

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

相关推荐