业务背景
客户体检需要牙齿情况需要田字格展示。
css样式
.divSize{ width: 17px; height: 17px; font-size: 3px; } .divNormal{ float: left; } .divChangeLine { /* div 换行 */ float: left; clear: left; } .yachi_span { display: inline-block; width: 40px; height: 32px; margin-left: 5px; } .yachi_input{ width: 19px; height: 20px; border: 1px solid; }
html代码
<td colspan="4"> 齿列 1正常 <input name="tjDentition" type="checkbox" ${fn:contains(jmExamination.tjDentition,'1')?"checked='checked'":""} value="1" class="no"> 2缺齿 <input name="tjDentition" type="checkbox" ${fn:contains(jmExamination.tjDentition,'2')?"checked='checked'":""} value="2" > <span class="yachi_span"> <span class="divNormal divSize"><input type="text" class="yachi_input" name="tjQcLeftTop" value="${jmExamination.tjQcLeftTop}" ></span> <span class="divNormal divSize"><input type="text" class="yachi_input" name="tjQcRightTop" value="${jmExamination.tjQcRightTop}"></span> <span class="divChangeLine divSize"><input type="text" class="yachi_input" name="tjQcLeftBottom" value="${jmExamination.tjQcLeftBottom}"></span> <span class="divNormal divSize"><input type="text" class="yachi_input" name="tjQcRightBottom" value="${jmExamination.tjQcRightBottom}"></span> </span> </td>
之前写法
<table style="display: inline-block;" cellspacing=0 cellpadding=0> <tr> <td><input type="text" class="yachi_input" name="tjJyLeftTop" value="${jmExamination.tjJyLeftTop}"></td> <td><input type="text" class="yachi_input" name="tjJyRightTop" value="${jmExamination.tjJyRightTop}"></td> </tr> <tr> <td><input type="text" class="yachi_input" name="tjJyLeftBottom" value="${jmExamination.tjJyLeftBottom}"></td> <td><input type="text" class="yachi_input" name="tjJyRightBottom" value="${jmExamination.tjJyRightBottom}"></td> </tr> </table>
.yachi_input{ width: 20px; border-bottom: none; height: 20px; } .yachi_table td { height: 15px; }
相比之下,table这种写法,没有span好