代码之家 › 专栏 › 技术社区 › Carl Smotricz

HTML布局:标题和按钮

layout css html

Carl Smotricz · 技术社区 · 15 年前

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

为了节省原本拥挤的图形用户界面中的空间,“注销”按钮应该放在标题行而不是其他地方。当然,标题行包含一个标题。对于给定的browser/opsys组合,该按钮应显示在其默认维度的右上角,并带有一点填充。标题应在该行的剩余空间中居中。这是一张图片:

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

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

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

…标题继续位于其区域的中心,这也是始终的(总可用宽度-按钮所需的宽度)。页面最终可能会在无javascript的环境中使用,因此动态大小计算不是一个选项。也不是(在你问之前)把顾客从他的设计中说出来。

有人能推荐HTML(如果需要,还有CSS)来实现这种布局吗?

更新更多限制/解释(抱歉):视力差的人可以查看此应用程序,他们喜欢使用缩放按钮。( Ctrl键 - + )放大字体大小。因此,我希望尽可能少地假设文本的大小。显然,在大变焦的小型显示器上,我最终没有足够的空间来放置未添加的标题和按钮;但在此之前,我希望保持灵活。

4 回复 | 直到 15 年前

Funka 15 年前

我有两个可能的解决方案。我承认,这些似乎只是对已经给出的一些答案的修改,但希望能解决你迄今为止留下的评论。

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 希望能找到一个好的解决方案。

表格法:

另一种方法是修改由硼砂提供的基于表格的方法。我修改了这个按钮,不做任何关于按钮宽度的假设…

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

祝你好运!

akuhn 15 年前

您可以使用浮动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>

borayeris 15 年前

如果表格可以接受,使用

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

-1

Chetan S 15 年前

也许不是最优雅的解决方案,但像这样的解决方案应该有效。这是基于阿德里安的解决方案

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>