cssに問題があります。span タグ内のテキストを vertical-align:middle しようとしています。
2 行のテキストでは機能しますが、1 行のテキストでは機能しません。
助けてください..
私は次のコードを使用しました...
<div>
<table>
<tr>
<td class="chld_Middle_Main_Right_Products_Landing_kits">
<ul>
<li>
<img /><input type='checkbox' value='28' /><br />
<a href='#'>
<span class='button2'>Antigua and Barbuda</span>
</a></li>
<li>
<img /><input type='checkbox' value='15' /><br />
<a href='#'>
<span class='button2'>Bosnia and Herzegovina</span>
</a></li>
<li>
<img /><input type='checkbox' value='1' /><br />
<a href='#'>
<span class='button2'>Pakistan</span>
</a></li>
</ul>
</td>
</tr>
</table>
</div>
そして私は次のcssを使用しました
.chld_Middle_Main_Right_Products_Landing_kits {}
.chld_Middle_Main_Right_Products_Landing_kits > ul {list-style-type: none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.chld_Middle_Main_Right_Products_Landing_kits > ul > li {display:inline-block; vertical-align:top; padding: 15px 15px 15px 10px; text-align: center;}
.chld_Middle_Main_Right_Products_Landing_kits > ul > li > a {}
.chld_Middle_Main_Right_Products_Landing_kits > ul > li > img {width: 112px; height: 112px; border: 1px solid #cccccc;}
.chld_Middle_Main_Right_Products_Landing_kits > ul > li > input {vertical-align:top;cursor:pointer;margin:0px 0px 0px -20px;}
.chld_Middle_Main_Right_Products_Landing_kits > ul > li > a > span {width: 102px;height:35px; display: inline-block; margin-top:-4px;margin-left:0px; font-family:verdana, sans-serif; text-shadow: 1px 0.5px 0 rgba(0,0,0,0.3);color:#666;}
.button2{width:120px;font-size:10px;font-family:verdana, sans-serif; padding: 5px 5px 5px 5px; text-shadow: 1px 0.5px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color:#666; background-color: #dedbdb;border:1px solid #CCC; text-decoration:underline;cursor:pointer;}
.button2:hover{background-color: #00adee;cursor:pointer; color:#fff;text-decoration:underline;}