如何用按钮制作标题标题答案

【问题标题】：how to make header title with buttons如何用按钮制作标题标题
【发布时间】：2015-11-22 10:01:51
【问题描述】：

有一个离子框架，用左右两个按钮制作标题标题太容易了，而且它是响应式的。换句话说，标题标题总是在页面中间。

这是他们如何实现的代码..这是我的 plunker http://plnkr.co/edit/BqtvCYYfhhbokzbbOXU4?p=preview

<ion-header-bar align-title="center" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

但是我只需要使用 HTML5 和 css3 或 css 来实现同样的事情，但我无法左右设置按钮位置。如何设置左右按钮位置。

这是我的代码 http://plnkr.co/edit/OGr7px9jueIfDTsHhePA?p=preview

<body>
  <div style="" class="header">
     <button style="position:absolute;left:5px">left</button>
   <h2 style="margin:0px;padding-top:10px;color:white">Title !</h2> 
   <button style="position:absolute;right:5px">right</button>
</div>
 </body>

css

.header{
  background:blue;
  height:44px;
  text-align:center;
  position:relative;
}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

h2 强制按钮向下移动，因为它强制换行，只需像这样重新排列顺序：

<div style="" class="header">
   <button style="position:absolute;left:5px">left</button>
   <button style="position:absolute;right:5px">right</button>
   <h2 style="margin:0px;padding-top:10px;color:white">Title !</h2> 
</div>

【讨论】：

【解决方案2】：

将第二个按钮移到H2 上方，并将top: 2px（或您需要的东西）添加到两个按钮的样式中。他们需要一个top 规则，否则第二个会像现在一样显示在H2 之后。

【讨论】：