如何在离子中制作相同大小的按钮答案

【问题标题】：how to make button of same size in ionic如何在离子中制作相同大小的按钮
【发布时间】：2015-09-28 05:10:42
【问题描述】：

你能告诉我如何制作相同大小（或相同高度）的按钮。实际上我有四个按钮和一个切换按钮在一排我需要它们的高度应该如图所示。我需要降低高度切换按钮。我们可以像图片中显示的那样制作吗

这是我的代码

.margin_button_bar{
    margin-left: -0.5em!important;
  padding:0.5em!important;
}
.button_tab{
    position: relative;
}
.toggle_button{
    position: absolute!important; right: 0px!important;
    display: inline;
border: none;
    background: transparent;
  paddig:0.5em!important;
}

我们可以减少切换按钮的高度吗？

【问题讨论】：

你得到答案了吗？

标签： angularjs css angularjs-scope ionic-framework

【解决方案1】：

您可以通过更改 .toggle .track {} 类来更改切换轨道的高度（切换滑动的部分），您可以在 .toggle .handle {} 中更改手柄（移动的部分） class: 或者在你的 ion toggle 中，你可以将 toggle-small 作为一个类应用，所以它看起来像 <ion-toggle class="toggle-small">

看看这个游乐场并玩css http://play.ionic.io/app/46f56cb9e30d

代码：

HTML：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding">
       <ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

      </ion-content>
    </ion-pane>
  </body>
</html>

CSS：

/* Styles here */
.toggle .track {
  height: 20px;
}

.toggle .handle {
  height: 20px;
}

JS：

angular.module('app', ['ionic']);

【讨论】：