Question

我正在使用Ionic来构建我的应用程序，我有一个模态视图弹出并尝试拥有HEADER TITLE然后在TITLE右侧有2个按钮但是当我尝试要做到这一点，它总是把一个按钮放在左边。我这是主要的代码片段：

      <h1 class="title">Title!</h1>

      <div class="buttons">
        <button class="button">Right Button</button>
      </div>
      <div class="buttons">
        <button side="right" class="button">Left Button</button>
      </div>
   </ion-header-bar>

完整代码here。

Answer 1

这是因为Ionic按照以下规则选择buttons类：

.bar .title + .buttons { ... }

这意味着，这些样式仅适用于类buttons的元素，它直接跟随类title的元素！请参阅more information about the plus selector on MDN。

只需将两个按钮放在div包装中即可避免此行为：

<div class="buttons">
  <button class="button">Right Button</button>
  <button class="button">Left Button</button>
</div>

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Ionic Template</title>
  <link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
</head>

<body>
  <ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
      <h1 class="title">Title!</h1>
      <div class="buttons">
        <button class="button">Right Button</button>
        <button class="button">Left Button</button>
      </div>
    </ion-header-bar>
  </ion-modal-view>
</body>

</html>

带有标题的离子标题和右侧的2个按钮

1 个答案: