个人中心
gpt4 book ai didi

css - 类固醇 ionic 形式低于标题栏

转载 作者：行者123 更新时间：2023-11-28 17:28:23 27 4
gpt4 key购买 nike

我是第一次开始使用 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>

最佳答案

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

ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.

关于css - 类固醇 ionic 形式低于标题栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26677101/

27 4 0
文章推荐： python - Djoser 连接错误
文章推荐： javascript - 如何将所有左浮动元素对齐到其父元素的中心？
文章推荐： javascript - 在返回 promise 之前等待函数完成
文章推荐： javascript - 向上/向下键不适用于我页面中的 Angular Material 设计