HTML 布局 : Title and Button

Question

我要根据自定义规范为 Web 应用程序实现全屏布局。我已经控制了大部分，但有一部分我遇到了一些麻烦。

为了在本来已经很拥挤的 GUI 中节省空间，“注销”按钮应该放在标题行而不是其他地方。标题行当然包含标题。对于给定的浏览器/opsys 组合，该按钮应以其默认尺寸显示在右上角，并带有一些填充。标题应位于该行剩余空间的中央。这是一张照片:

+====================+=======+
|    ACME Widgets    | [Btn] |
+====================+=======+

我不知道按钮的宽度，我也不需要知道。布局应在一系列设备和分辨率上平滑缩放，从大约 200 像素宽度到 2000 像素:

+==================================================+=======+
|                   ACME Widgets                   | [Btn] |
+==================================================+=======+

...标题继续在其区域居中，这又将始终是(总可用宽度 - 按钮所需的宽度)。该页面最终可能会在无 JavaScript 的环境中使用，因此动态大小计算不是一种选择。也不是(在您提出要求之前)说服客户放弃他的设计。

谁能建议 HTML(如果需要，CSS)来实现这种布局？

更新 更多限制/解释(抱歉):视力不佳的人可以查看此应用程序，他们喜欢使用缩放按钮(Ctrl- +) 放大字体大小。因此，我希望尽可能少地假设文本大小等问题。显然，在具有大缩放比例的微型显示器上，我最终将没有足够的空间来放置未填充的标题和按钮；但在那之前我想保持灵 active 。

Answer 1

我有两种可能的解决方案。我承认，它们似乎只是对已经给出的一些答案的简单修改，但应该有望解决您到目前为止留下的评论。

CSS 方法:

假设您确定您的按钮的合适宽度是 5em。当然，这与浏览器的文本缩放比例始终为 5em。

然后也许你可以将它 float 到右边，并在你的标题 5em 上放置一个 margin-right。

#buttonContainer {
 float:right;
 display:inline;
 width:5em;
 text-align:right;
}
#titleContainer {
 text-align:center;
 margin-right:5em;
 border:1px solid blue;
}

<div id="buttonContainer">
    <input id="btnLogOut" type="button" value="Log Out" />
</div>
<div id="titleContainer">
    <h1 style="text-align:center;" id="title">ACME Widgets</h1>
</div>

这种方法可能并不完美，但您可以调整 em 单元并有望获得一个不错的解决方案。

表格方法:

另一种方法是对 borayeris 给出的基于表格的方法的修改。我对此进行了修改，不对按钮的宽度做出任何假设...

<table border="0" width="100%">
  <tr>
    <td width="99%" align="center">ACME Widgets</td>
    <td width="1%" align="right">button</td>
  </tr>
</table>

祝你好运!