HTML布局:标题和按钮

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

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>

祝你好运!

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

如果表格可以接受,使用

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

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

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>