Question

我需要对遗留的基于Web的cms（具有基于表格的布局）进行一些更改。我只能对网站的内容区域进行更改，这是在几个复杂的嵌套表中，但我想我们可以假设它只是一个表。

鉴于下面的（简化）代码，是否可以在IE6和IE7的最右侧显示ABC？

<table>
  <tr>
    <td style="width:200px; border:solid 1px black;">
      <!-- can only make changes inside here -->
      <div style="border:solid 1px red; text-align:right;">ABC</div>
      <input style="width:300px;" value="DEF">
    </td>
  </tr>
</table>

<input>标记表示某些内容可能比表格单元格的预设宽度更长。在IE8或其他现代浏览器中，div可以扩展以匹配输入。但是在IE6和IE7中，我似乎无法使用css将其扩展到200px以上。我已经尝试过使用float，width，position relative等。再一次，我无法删除200px宽度声明或对表结构进行任何其他更改。

任何人都知道如何做到这一点？谢谢。

Answer 1

如果您可以更改单元格内的结构，则可以将所有内容包含在div float:left（或right或inline-block）中，以便它会扩展到这样的内容：http://jsfiddle.net/kizu/AkVqS/

如果无法包装input部分，则可以使用仅运行一次的表达式（因此不会导致任何性能问题）：http://jsfiddle.net/AkVqS/2/

在基于表格的布局中div对齐的问题

1 个答案: