gpt4 book ai didi

javascript - ionic Angular ion-content 填充问题

转载 作者:行者123 更新时间:2023-11-28 05:37:27 29 4
gpt4 key购买 nike

我正在开发我的第一个 Ionic 应用程序。我从基本的侧边菜单模板开始。

$ ionic start myApp sidemenu

从那里我创建了一个带有列表的简单页面,它看起来像这样......

<ion-view view-title="Players">
<ion-nav-buttons side="right">
<button class="button button-positive" ng-click="doSomething()"> Learn More</button>
</ion-nav-buttons>
<ion-content>
<ion-refresher
pulling-text="Pull to refresh..."
on-refresh="doRefresh()">
</ion-refresher>
<ion-list can-swipe="listCanSwipe">
<ion-item class="item-icon-left" ng-repeat="player in players" href="#/app/players/{{player.id}}">
<i class="icon ion-ios-contact"></i>
{{player.fname}} {{player.lname}}
<span class="item-note">
{{player.city}}, {{player.state}}
</span>
<ion-option-button class="button-positive" ng-click="share(item)">
[Option 1]
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

我的问题具体是关于 <span class="item-note">部分。我从 Ionic 的示例中获取了此示例代码:http://ionicframework.com/docs/components/#item-icons 。在他们的示例中,您可以看到注释文本一直到右边缘,但在我的页面中有很多填充。我查看了源代码,它似乎来自这里...

.item-complex .item-content, .item-radio .item-content {
position: relative;
z-index: 2;
padding: 16px 49px 16px 16px;
border: none;
background-color: #fff;
}

我知道我可以编写自己的 css 来覆盖它,但我宁愿它像他们的示例一样工作,而无需我修改它。那么我在标记中做错了什么吗?这是一个错误吗?我如何摆脱右侧的 49px 间隙,使其看起来像他们的示例?谢谢!

最佳答案

在本例中,您将在模板中使用 </ion-option-button> .

因此,它在 ion-item 的右侧添加了额外的填充。

如果你删除那个,你会得到准确的结果,在 example选项按钮不存在。

由于这个.item-radio添加了类。

如果您需要这样一个,那么您可能需要自定义 CSS。

希望这对您有帮助!

关于javascript - ionic Angular ion-content 填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39238665/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com