HTML布局：标题和按钮 [英] HTML layout: Title and Button

问题描述

我将根据自定义规范为Web应用程序实现全屏布局。

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

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

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

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

...标题继续在其区域中心，这也将总是（总可用宽度 - 按钮所需的宽度）。页面可能最终在无JavaScript环境中使用，因此动态大小计算不是一个选项。

任何人都可以建议HTML（如果需要的话，CSS）来实现这个布局？

更新更多限制/说明（对不起）：这个应用程式可能被视力不佳的使用者所喜欢使用缩放按钮> Ctrl - + ）以放大字体大小。因此，我想尽可能少地对文本大小这样的假设。显然，在一个微小的显示器与大变焦，我最终没有足够的空间，未添加的标题和按钮;但是在此之前我想保持灵活性。

解决方案

我有两个可能的解决方案。我会承认，他们似乎只是对已经给出的一些答案的修改，但应该希望回答到目前为止留下的意见。

CSS方法：

假设您确定按钮的宽度为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 =btnLogOuttype =buttonvalue =Log Out/> 
< / div> 
< div id =titleContainer> 
< h1 style =text-align：center; id =title> ACME小部件< / h1> 
< / div> 
  

这种方法可能不是完美的，但你可以调整 em

另一种方法是修改borayeris提供的基于表的方法。我修改了这个不对按钮的宽度做任何假设...

 < table border =0 width =100％> 
< tr> 
< td width =99％align =center> ACME小部件< / td> 
< td width =1％align =right>按钮< / td> 
< / tr> 
< / table> 
  

祝你好运！

I'm to implement a fullscreen layout for a Web app according to custom specs. I've got most of it under control but there's one part I have some trouble with.

To economize on space in an otherwise already crowded GUI, a "Log out" button should go into the title row rather than elsewhere. The title row, of course, contains a title. The button should appear in its default dimensions for the given browser/opsys combination at the top right, with a little padding. The title should be centered in the remaining space in that row. Here's a picture:

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

I don't know how wide the button will be, nor should I need to. The layout should scale smoothly on a range of devices and resolutions, from about 200 px width to 2000:

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

...with the title continuing to be centered in its area, which again will always be (total available width - width required for the button). The page may end up being used in a JavaScript-less environment, so dynamic size calculation is not an option. Nor (before you ask) is talking the customer out of his design.

Can anyone please suggest HTML (and, if required, CSS) to achieve this layout?

Update More constraints/explanation (sorry): This app could be viewed by people with poor vision, who like to use their zoom button (Ctrl-+) to blow up font sizes. Therefore, I'd like to go with as few assumptions about things like text sizes as possible. Obviously, on a tiny display with big zoom I would eventually not have enough space for the unpadded title and button; but until then I'd like to stay flexible.

解决方案

I have two possible solutions. I will admit, they seem like these are simply modifications to some answers already given but should hopefully address the comments you've left so far.

CSS approach:

Lets say you determine that a nice width for your button is 5em. This of course scales with the browser's text zoom to always be, well, 5em.

Then perhaps you could float this to the right, and put a margin-right on your title of 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>

This approach may not be picture-perfect, but you can tweak the em unit and arrive at a nice solution hopefully.

Table-approach:

Another approach is a modification of the table-based approach given by borayeris. I have modified this to not make any assumptions about the width of the button...

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

Good luck!

这篇关于HTML布局：标题和按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！