Question

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

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

list = [['25 1 100.5 2 300'], ['50 3 125.5 4 85']]
new_list = []
for x in list:
  new_list.append([float(y) for y in x[0].split(" ")])

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

这是我的代码 http://plnkr.co/edit/OGr7px9jueIfDTsHhePA?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>

CSS

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

Answer 1

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

Answer 2

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 个答案: