gpt4 book ai didi

javascript - 对齐屏幕 ionic html右下角的按钮

转载 作者:行者123 更新时间:2023-11-30 15:38:51 26 4
gpt4 key购买 nike

我试图让我的按钮 float 在屏幕的右下角,而不是在屏幕上其他对象发生变化时改变位置。这是我目前所拥有的:

<head>
<style>
.button-float{
z-index: 12;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
position: absolute;
bottom: 15px;
right: 15px;
border-radius: 50% !important;
}
</style>
</head>
<body ng-app="App">
<ion-header-bar align-title="center" class="bar-positive">
</ion-header-bar>
<ion-content class="has-header" overflow-scroll="false">
<div>
<a ng-repeat="equipment in equipment" class="item item-thumbnail-left" ng-click="goToEquipDetail(equipment)">
<img src="resources/{{equipment.Photo}}">
<h2>Item Name: {{equipment.ItemName}}</h2>
<p>Serial Number: {{equipment.SerialNumber}}</p>
<img style="position: absolute; right: 0; bottom: 0; width: 45px; height: 45px;"src="resources/{{equipment.EquipmentStatus.StatusPhoto}}">
<p>Status: {{equipment.EquipmentStatus.StatusName}}</p>
</a>
<div>
</ion-content>
<button class="button button-float button-positive" ng-click="showOptions()">
<i class="icon ion-plus"></i>
</button>
</body>

Here is what it looks like with above code

但是当添加更多对象或删除对象时,按钮会移动。我需要它保持在屏幕的最底部,而不是像显示的那样在对象的顶部并且根本不动。

我的造型哪里做错了?谢谢

最佳答案

设置css位置固定如下,

<style>
.button-float{
z-index: 12;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
position: fixed;
bottom: 15px;
right: 15px;
border-radius: 50% !important;
}
</style>

关于javascript - 对齐屏幕 ionic html右下角的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41127502/

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