奇怪的CSS定位行为

Question

为什么这个div中的表格与右边的内容非常吻合，这完全超出了我的想法。

<div id="proof_check" style="position:relative; width:577px;  padding:10px; padding-bottom:0px;padding-top:0px; border:3px solid #ccc;  background-color:#fff; z-index:0"> 
<table><tr><td></td><td style='vertical-align:top; padding-left:5px;'><span style='font-weight:bold; color: #295BA7;'>Proof Approval</span><br /></td></tr><tr><td><input type='checkbox' id='proof-approved'></td><td style='vertical-align:top;padding-left:5px;'>I approve of the above design, spelling and layout and understand that my document will print as it appears above and that after placing my order, it cannot be changed.</td></tr><tr valign=bottom><td colspan='2'></td>
</tr>
</table>
</div>

这就是结果：

为什么它从div的中间开始而不是在左边的更多？

Answer 1

您没有为表格的列“td”提供任何colspan或宽度。因此，它将表行'tr'分成两个相等的部分。

给一个colspan元素，如：

<TABLE STYLE="table-layout:fixed;">
  <COLSPAN>
   <COL width="5%"/>
   <COL width="95%">
  </COLSPAN>
  ....rest of the code goes here...
</TABLE>

每次第一列为5％，第二列占95％宽度。

希望有所帮助

Answer 2

代码看起来很好，我能解决的唯一问题是你的proof_check div中的“position：relative”，也许你的父div导致了问题。 将其更改为“position：absolute” 希望能解决你的问题！

Answer 3

这是因为您没有为第一个表格单元格定义宽度（使用检查框）。设置它的宽度，你应该没问题......或者用div而不是表来做。