Please refer to this image 我正在尝试 ionic 框架。我看到传统上范围 slider 是图标 slider 图标。但是，我想要图标 slider 徽章。徽章显示 slider 的值。目前有重叠。任何人都知道如何解决它？
<div class="item range range-{{selection.secondary}}">
<i class="icon ion-ios-timer"></i>
<input type="range" name="volume" min="0" max="10" ng-model="count">
<i class="badge badge-royal">5</i>
</div>
最佳答案
您观察到的是 Ionic 中徽章的正常行为:它们与组件重叠。
这是一个自定义徽章 CSS 类的示例，它更类似于图标:
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {
$scope.count=5;
});.mybadge.badge-royal {
background-color: #886aea;
color: #fff;
}
.mybadge {
background-color: transparent;
color: #AAAAAA;
z-index: 1;
display: inline-block;
padding: 3px 8px;
border-radius: 10px;
vertical-align: baseline;
text-align: center;
white-space: nowrap;
font-weight: bold;
font-size: 14px;
line-height: 16px;
-webkit-box-flex: 0;
-webkit-flex: 0 ;
-moz-box-flex: 0;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
display: block;
min-width: 24px;
}<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Badges</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Badges</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item item-divider">
Original Ionic badge
</div>
<div class="item range range-{{selection.secondary}}">
<i class="icon ion-ios-timer"></i>
<input type="range" name="volume" min="0" max="10" ng-model="count">
<span class="badge badge-royal">5</span>
</div>
<div class="item range range-positive">
<i class="icon ion-ios-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios-sunny"></i>
</div>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i> Friends
<span class="badge badge-assertive">0</span>
</a>
<div class="item item-divider">
Custom badge for slider
</div>
<div class="item range range-positive">
<i class="icon ion-ios-timer"></i>
<input type="range" name="volume" min="0" max="10" ng-model="count">
<i class="mybadge badge-royal">{{count}}</i>
</div>
</div>
</ion-content>
</body>
</html>关于jquery - ionic 范围和徽章重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35215019/