我正在尝试制作一个 onClick() 按钮，当按下该按钮时，会显示文本。我的问题是，当我单击该按钮时，该按钮会在显示文本时快速下降。
有没有办法让按钮出现文字时不动？也许让它实际上在那里但隐藏并在按钮上取消隐藏它？我不知道，我只是不想让它在按下按钮时移动。
angular.module('starter.controllers', ['ionic'])
.controller('HomeCtrl', function($scope) {
$scope.flip = function() {
$scope.coinResult = "Heads";
}
})
<body ng-app="starter">
<head>
<style>
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<ion-content>
<div class="centerItems">
<p class="coin-result" ng-bind="coinResult"></p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>
</ion-content>
</body>
最佳答案
一种方法是固定文本 div coin-result 的高度并给它 overflow-y: auto。这可确保按钮保持不动。
下面的演示:
.button-calm {
width: 50%;
}
.coin-result {
text-align: center;
line-height: 100px;
height: 100px;
overflow-y: auto;
}
.centerItems {
margin-left: auto;
margin-right: auto;
}<div class="centerItems">
<p class="coin-result" ng-bind="coinResult">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<button class="button button-outline button-calm" ng-click="flip()">Flip!</button>
</div>让我知道您对此的反馈。谢谢!
关于javascript - 中心按钮和文本问题 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39968845/