DIV中的表格不能对齐,求助。。。。
<p>
</p>
<style type="text/css">
td { font-size: 9pt}
.title { font-size: 10.5pt}
.iwhite {
border-left: 1px solid rgb(255,255,255);
border-right: 1px solid rgb(255,255,255);
border-top: 1px solid rgb(255,255,255);
border-bottom:1px solid rgb(0.0,255);
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 9pt; color: #298583;background:#ffffff; font-weight: normal}
.igray {font-family: "宋体";
font-size: 9pt;
color: #000000;
background:#ffffff;
font-weight: normal;
border-bottom: 0px solid #D7E0EC;
border-top: 0px solid #DADBE3;
border-right: 0px solid #DADBE3;
border-left: 0px solid #DADBE3;
}
.igrby {font-family: "宋体";
font-size: 9pt;
color: #000000;
background:#ffffff;
font-weight: normal;
border-bottom: 0px solid #D7E0EC;
border-top: 0px solid #DADBE3;
border-right: 0px solid #DADBE3;
border-left: 0px solid #DADBE3;
}
.tabborder {
border:1px solid #ffffff;
}
.writetd {
text-align:left;
padding:6px;
}
ul {width:100%;height:100%;}
li {float:left; height:63px;text-align:center;line-height:62px;}
li.b {border-bottom:1px solid #000;width:18%;border-right:1px solid #000; float:left }
li.zhongjian {border-bottom:1px solid #000; width:62%; border-right:1px solid #000; }
li.you {
border-bottom:1px solid #000;
width:20%;
}
</style>
<table border="0" cellpadding="0" cellspacing="0" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" width="100%">
<tbody>
<tr>
<td align="middle" height="42" style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px">
<font size="+1"><strong>员工离职审批单</strong></font></td>
</tr>
</tbody>
</table>
<table align="center" border="1" bordercolor="#666666" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="95%">
<tbody>
<tr>
<td bgcolor="#ffffff" colspan="2" style="text-align: center">
公文标题</td>
<td bgcolor="#ffffff" class="writetd" colspan="6">
<input name="文件标题" size="40" /><span style="color: #8b4513">(例:生产部张三的离职申请)</span></td>
</tr>
<tr>
<td class="writetd" style="text-align: center">
姓名</td>
<td class="writetd">
<input id="3698" name="姓名" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
部门</td>
<td class="writetd">
<input id="3699" name="部门" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
入职日期</td>
<td class="writetd">
<input id="3700" name="入职日期" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
交接日期</td>
<td class="writetd">
<input id="3701" name="交接日期" size="10" style="width: 70px; height: 18px" /></td>
</tr>
<tr>
<td class="writetd" style="text-align: center">
类型</td>
<td class="writetd">
<input id="3697" name="离职类型" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
职务</td>
<td class="writetd" style="text-align: justify">
<input id="3704" name="职务" size="10" style="width: 70px; height: 18px" /></td>
<td class="writetd" style="text-align: center">
交接人</td>
<td class="writetd">
<input id="3703" name="交接人" size="10" style="width: 70px; height: 18px" /></td>
<td style="text-align: center">
离职日期</td>
<td class="writetd">
<input id="3702" name="离职日期" size="10" style="width: 70px; height: 18px" /></td>
</tr>
<tr>
<td bgcolor="#ffffff" colspan="2" style="text-align: center" width="20%">
离职原因</td>
<td bgcolor="#ffffff" class="writetd" colspan="6" width="80%">
<textarea cols="60" id="3705" name="离职原因" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="8">
<div id="a1">
<ul>
<li class="b">生活更美好1</li>
<li class="zhongjian"><input readOnly type="text" class="igray" id="3998" name="fieldstr6" value=""></li>
<li class="you"> <input readOnly type="text" class="igray" id="3999" name="fieldstr7" value=""></li>
</ul>
</div>
<div id="a2">
<ul>
<li class="b">生活更美好2</li>
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>
<li class="you"> </li>
</ul>
</div>
<div id="a3">
<ul>
<li class="b">生活更美好3</li>
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>
<li class="you"> <input readOnly type="text" class="igray" id="3999" name="fieldstr7" value=""></li>
</ul>
</div>
<div style="clear:both"></div>
<div id="a4">
<ul>
<li class="b">生活更美好4</li>
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>
<li class="you"> <span></span></li>
</ul>
</div>
<div style="clear:both"></div>
<div id="a5">
<ul>
<li class="b">生活更美好5</li>
<li class="zhongjian"><textarea readOnly cols="60" id="4381" name="longstr3" rows="3"></textarea readOnly></li>
<li class="you">
<input readOnly type="text" class="igray" id="3999" name="fieldstr7" value=""></li>
</ul>
</div>
<div style="clear:both"></div>
<script type="text/javascript">
window.onload=function(){
var a=document.getElementsByTagName("div");
for(i=0;i<a.length;i++)
{
var b=a[i].getElementsByTagName("textarea");
if(b.length==0)
{
a[i].style.display='none';
}
}
}
</script></td>
</tr>
<tr>
<td class="writetd" colspan="4" style="text-align: center">
制单人:<input name="提交人" /></td>
<td class="writetd" colspan="4" style="text-align: center">
制单日期:<input name="提交日期" /></td>
</tr>
<tr>
<td class="writetd" colspan="8">
1、人力资源部每月18日、30日办理员工离职手续相关事宜,其他时间不予办理。<br />
2、员工完成工作交接并完成本人离职手续后方可离职。<br />
3、交接单一式三份,人力资源部、移交人及交接人各一份。</td>
</tr>
</tbody>
</table>
[解决办法]
将 li.you 中的 width:20% 去掉 让其自适应 因为换行的原因是 li.b 20% li.zhongjian 60% li.you 20% 看起来是100%了 但是你忘记了你还设置了border的宽度 1px 所以实际上已经超出了td的100% 所以后面的换行了
你可以看你的修改后的代码 很明显有个地方线突出了 突出的距离大概是2个或4个线的宽度 自己好好琢磨琢磨去调整