Html 离子内容：填充还是不填充？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32071240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic-content: padding or no padding?
提问by binoculars
I'm trying to recreate something similar to this.
I've noticed that the input fields can't be inside <ion-content class="padding">because then they get an ugly padding. The button on the other hand, needs this padding, because otherwise it sticks to the side without any padding.
我正在尝试重新创建类似于this 的东西。我注意到输入字段不能在里面，<ion-content class="padding">因为它们会得到一个丑陋的填充。另一方面，按钮需要这个填充，否则它会粘在侧面而没有任何填充。
The following code didn't work, since that places the button on top of the input fields:
以下代码不起作用，因为它将按钮放在输入字段的顶部：
<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>
UPDATE:
更新：
This layout is what I want (notice there's no padding on the input fields, but there is padding on the button):
这种布局是我想要的（注意输入字段上没有填充，但按钮上有填充）：
This layout is what I get when I use <ion-content class="padding">(notice the padding on the input fields):
这个布局是我使用时得到的<ion-content class="padding">（注意输入字段上的填充）：
This layout is what I get when I use <ion-content>(notice there's no padding on the button):
这个布局是我使用时得到的<ion-content>（注意按钮上没有填充）：
回答by Nikola
You should use it like this:
你应该像这样使用它：
<ion-content padding="true">
You can see the example from the official Ionic example
您可以从官方的 Ionic 示例中查看示例
回答by Garrett Grimsley
I created a working example here: http://play.ionic.io/app/1662da9d9b7d
To achieve your desired effect place all of your text form fields in an element with no horizontal padding, so that the forms reach the edge of the screen, then place the button in a nested div with padding, like so:
我在这里创建了一个工作示例：http: //play.ionic.io/app/1662da9d9b7d
为了达到您想要的效果，将所有文本表单字段放在一个没有水平填充的元素中，以便表单到达屏幕的边缘，然后将按钮放置在带有填充的嵌套 div 中，如下所示：
<ion-content>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Email Address</span>
<input type="email" placeholder="Email Address">
</label>
<div class="padding-horizontal">
<button class="button button-positive button-block" ng-click="clicked()">
Create Account
</button>
</div>
</div>
</ion-content>
See output below.
请参阅下面的输出。
I only applied horizontal padding because I felt that vertical padding, which is added by default by the paddingclass[0], resulted in too much white-space.
我只应用了水平填充，因为我觉得由paddingclass[0]默认添加的垂直填充会导致太多的空白。
回答by AndreiMosso
According to the documentation, you need to use a Full Width Block Button:
根据文档，您需要使用全宽块按钮：
<button class="button button-full button-positive">
Full Width Block Button
</button>
And also your content directive must nothave the padding attribute.
而且你的内容指令不能有 padding 属性。
Hope it helps.
希望能帮助到你。
回答by Dismi Paul
You can try removing padding from ion-paddingand add padding-top=""inside a divclass.
您可以尝试从类中删除填充ion-padding并padding-top=""在div类中添加。
<ion-view view-title="Settings">
<div ng-controller="ClickedCtrl">
<ion-content>
<div class="list" padding-top="">
<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>Hope this helps.
希望这可以帮助。
