1

我第一次开始使用 javascript，我将 steroids 项目的 index.html 变成了一个简单的登录表单，但内容在标题下方。我也尝试了这些<ionic-header-bar><ionic-content>标签，但没有一个有效。我错过了什么？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width">
  <title>Gestor de Mesas</title>

  <link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
  <link rel="stylesheet" href="/stylesheets/application.css" />

  <script src="/javascripts/onerror.js"></script>
  <script src="/javascripts/console.log.js"></script>

  <!-- cordova.js is served from localhost to ensure the correct version -->
  <script src="http://localhost/cordova.js"></script>
  <script src="/components/steroids-js/steroids.js"></script>

  <script src="/javascripts/application.js"></script>
</head>
<body class="content">
  <ion-header-bar class="bar bar-header bar-positive">
    <h1 class="title">Login</h1>
  </ion-header-bar>
  <ion-content>
  <div class="list">

    <label class="item item-input">
        <span class="input-label">Username</span>
        <input type="text">
    </label>

    <label class="item item-input">
        <span class="input-label">Password</span>
        <input type="password">
    </label>
    <li class="item item-checkbox">
     <label class="checkbox">
       <input type="checkbox">
     </label>
     Lembrar?
  </li>
  </div>
  <button class="button button-positive">
        Entrar
  </button>
  </ion-content>
</body>
</html>
4

1 回答 1

1

尝试将 Class “has-header” 添加到您的标签中。它会解决问题。这是因为 ：

ion-header-bar 绝对定位。因此，您的较低内容落后于它。.has-header类定义了top : 44px，这会将您的内容向下移动到所需的空间。

于 2014-11-03T11:55:34.263 回答