HTML 布局：标题和按钮

Question

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

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

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

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

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

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

谁能建议使用 HTML（如果需要，还可以使用 CSS）来实现这种布局？

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

Answer 1

我有两种可能的解决方案。我承认，它们似乎只是对已经给出的一些答案的修改，但希望能解决你迄今为止留下的问题。

CSS 方法：

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

那么也许您可以将其浮动到右侧，并在您的标题 5em 上放置一个边距。

#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>

祝你好运！

Answer 2

您可以使用浮动 div。

<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets</h1> 

编辑：第二次尝试，使用显示但不可见的 div 与内容相同的按钮将标题居中在剩余空间中（也就是在 css 中做数学:)

<div style="float:right">[Btn]</div>
<h1 style="text-align:center;">ACME Widgets<div style="visibility:hidden">[Btn]</div></h1>

Answer 3

如果表格可以接受，请使用该表格

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

Answer 4

可能不是最优雅的解决方案，但这样的解决方案应该可以。这是基于 Adrian 的解决方案

CSS

h1 {position: relative; left: 0; right: 100px; text-align: center}
.logout {float: right; width: 100px}

HTML

<div class="logout">Log me out</div>
<h1>ACME widgets</h1>