Css 类固醇离子形式位于标题栏下方

Css 类固醇离子形式位于标题栏下方,css,ionic-framework,steroids,Css,Ionic Framework,Steroids,我第一次开始使用javascript,我将一个类固醇项目的index.html转换为一个简单的登录表单,但是内容在标题下面。我也尝试过标记,但都不起作用。我错过了什么 <!DOCTYPE html> <html> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width"> <title>Gestor de Mes

我第一次开始使用javascript,我将一个类固醇项目的index.html转换为一个简单的登录表单,但是内容在标题下面。我也尝试过
标记,但都不起作用。我错过了什么

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

梅萨斯主教
登录
用户名
密码
  • 伦布拉?
  • 诱捕者
    尝试将类“has header”添加到标记中。这会解决问题的。这是因为:

    离子头棒绝对定位。因此,你的较低的内容在后面.has header类定义了top:44px,它会将内容向下移动到所需的空间