html - ion-content : padding or no padding?

标签 html css ionic-framework

我正在尝试重新创建类似于 this 的内容. 我注意到输入字段不能在 <ion-content class="padding"> 内因为那样他们会得到难看的填充物。另一方面,按钮需要此填充,否则它会粘在没有任何填充的一侧。

以下代码不起作用,因为它将按钮放置在输入字段的顶部:

<ion-view view-title="Settings">
    <div ng-controller="ClickedCtrl">
        <ion-content>
            <div class="list">
                <label class="item item-input item-floating-label">
                    <span class="input-label">First Name</span>
                    <input type="text" placeholder="First Name" ng-mode="fname">
                </label>
            </div>
        </ion-content>
        <ion-content class="padding">
            <button class="button button-positive" ng-click="clicked()">
                Save
            </button>
        </ion-content>
    </div>
</ion-view>

更新:

这个布局是我想要的(注意输入字段上没有填充,但按钮上有填充): enter image description here

这个布局是我在使用 <ion-content class="padding"> 时得到的(注意输入字段上的填充): enter image description here

这个布局是我在使用 <ion-content> 时得到的(注意按钮上没有填充): enter image description here

最佳答案

你应该像这样使用它:

<ion-content padding="true">

您可以从 official Ionic example 中查看示例

关于html - ion-content : padding or no padding?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32071240/

相关文章:

html - 根据图像的宽度自动调整部分 div 的大小?

javascript - Ng-Repeat,如何测试最后一个 ng-show 元素

angularjs - "Cross-origin-request blocked"。如何克服呢?

html - 在 Jade Pug 的循环中使用 CSS id 变量

javascript - 在许多更改的复选框之一上运行 javascript 函数

javascript - 倒数计数器,用户可以在其中输入结束日期

javascript - 当浏览器窗口最小化时,JS 会发生什么?

ruby-on-rails - 在 CSS 中传递 ruby​​ 标签

html - 使用带有背景图片的替代文本?

ionic-framework - 如何在 Ionic 4 中更改工具栏颜色