單選按鈕在表格單元格中未正確對齊

我希望在單選按鈕中有四個圖像供選擇，但是，在生成單選按鈕時，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;}

來源

2016-09-20 want_to_be_calm

你能分享用於設計這些箱子的CSS。

您是否嘗試過在每個元素上設置浮點數？在CSS中定義一個類，並添加類似：

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

來源

2016-09-20 04:54:56

試試這個：

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

來源

2016-09-20 05:01:56

試試下面的代碼：

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

來源

2016-09-20 05:05:32

單選按鈕在表格單元格中未正確對齊

回答

相關問題