相关疑难解决方法(0)

你可以在不使用表格的情况下进行HTML布局吗？

好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

Run Code Online (Sandbox Code Playgroud)

非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了？现在已经讨论过表vs divs/CSS的一般主题,例如:

DIV vs Table ; 和
表而不是DIV.

因此,这不是关于CSS与布局表格的一般性讨论.这只是一个问题的解决方案.我使用CSS尝试了以上的各种解决方案,包括:

浮动按钮或包含按钮的div;
相对于按钮的位置; 和
位置相对+绝对.

由于各种原因,这些解决方案都不令人满意.例如,相对定位导致z-index问题,其中我的下拉菜单出现在内容下.

所以我最终回到:

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

Run Code Online (Sandbox Code Playgroud)

而且效果很好.它很简单,因为它具有向后兼容性(即使在IE5上也可以工作)并且它只是起作用.没有搞乱定位或花车.

所以任何人都可以做没有表的等价物吗？

要求是: