Question

我第一次开始使用javascript，我将一个类固醇项目的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>

Answer 1

尝试添加Class＆＃34; has-header＆＃34;到你的标签。它会解决这个问题。这是因为：

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

类固醇离子形式低于标题栏

1 个答案: