Question

我正在尝试通过VS 2015上的apache cordova实现跨平台移动应用程序。问题是标题与按钮重叠某种方式。我检查了CSS文件和js文件，但无法解决。有线索吗？

以下是我的示例索引文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <meta http-equiv="Content-Security-Policy" content="connect-src 'self' https://ip/wcf/OCRService.svc 'unsafe-eval' 'unsafe-inline'; default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

    <title>LoTTo</title>

    <!-- LoTTo references -->

    <link href="css/ionicons.css" rel="stylesheet" />
    <link href="css/ionic.css" rel="stylesheet" />
    <link href="css/ng-img-crop.css" rel="stylesheet" />

    <!-- Cordova reference, this is added to your app when it's built. -->

    <script src="scripts/angular.min.js"></script>
    <script src="scripts/ionic.bundle.js"></script>
    <script src="scripts/ng-cordova.min.js"></script>
    <script src="scripts/ng-img-crop.js"></script>
    <!--<script src="cordova.js"></script>-->
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/index.js"></script>
    <!--<script src="scripts/angular-ios9-uiwebview.patch.js"></script>-->
    <script src="scripts/ng-file-upload-shim.min.js"></script>
    <script src="scripts/ng-file-upload.min.js"></script>


    <style>
        .cropArea {
            background: #E4E4E4;
            overflow: hidden;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body ng-app="starter">
    <ion-header-bar class="bar bar-header bar-light">
        <h1 class="title">LoTTo</h1>
    </ion-header-bar>
    <ion-content ng-controller="ExampleController" padding="true">
        <button class="button button-full button-balanced icon-right ion-ios-camera" ng-click="takePhoto()">
            Resim Çek
        </button>

        <button class="button button-full button-balanced icon-right ion-images" ng-click="choosePhoto()">
            Resim Seç
        </button>
        <center>
            <div class="cropArea">

               <img-crop image="myImage" result-image="myCroppedImage" change-on-fly="false"
                          area-type="rectangle"
                          area-min-size="100"
                          result-image-format="image/jpeg"
                          result-image-quality="1"
                          result-image-size="300"></img-crop>
            </div>
            <div ng-show="myImage !== undefined">Gönderilecek Resim:</div>

            <div><img ng-src="{{myCroppedImage}}" ng-show="myImage !== undefined" id="image" /></div>

        </center>
        <button class="button button-full button-balanced icon-right ion-images" ng-click="upload(myCroppedImage)" ng-if="myImage !== undefined">
            Resim Yükle
        </button>


    </ion-content>

</body>
</html>

提前致谢＆amp;最诚挚的问候。

这是纹波输出： overlap image

编辑1：如果我从标题取消注释cordova.js，按钮完全消失。这是纹波输出： disappear image

Answer 1

您需要在h1元素下面添加边距

h1.title {
  margin-bottom: 20px;
}

这将在按钮之前添加更多空间。

标题重叠按钮

1 个答案: