Question

我正在我的屏幕顶部制作标签栏。我需要给所有按钮提供相同的宽度。但我在一排内部我拿了三列，但是按钮是不是所有宽度为列为什么？你能告诉我如何拍摄整个宽度，如图所示

这是我的代码 http://codepen.io/anon/pen/NGqgYg

[![<!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-view ng-controller="vroCtrl">
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding">
           <div class="" id="buttonTab">
          <div class="button_vro_bar row">
            <div class="col"><a class="button " ng-click="handlerButtonClick('FY16_18_design')"
               ng-class="{'button_active':activeContentArea==='FY16_18_design'}">FY16 -18 Design (vs Target)</a></div>
            <div class="col"><a class="button " ng-click="handlerButtonClick('key_design_health')"
               ng-class="{'button_active':activeContentArea==='key_design_health'}">Key Design health Indicators</a></div>
            <div class="col"><a class="button " ng-click="handlerButtonClick('hc_swb')"
               ng-class="{'button_active':activeContentArea==='hc_swb'}">HC & SWB</a></div>


          </div>

        </div>

        <div ng-if="activeContentArea=='FY16_18_design'">
          <h1>FY16_18_design</h1>

        </div>
        <div ng-if="activeContentArea=='key_design_health'">
          <h1>key_design_health</h1>
        </div>

        <!-- account detail -->
        <div id="wrapper" ng-if="activeContentArea=='hc_swb'">
          <h1>hc_swb</h1>


        </div>
      </ion-content>
    </ion-view>
  </body>
</html>

更新 http://codepen.io/anon/pen/NGqgYg使用width：inherit我解决了我的问题..但是如何删除margin如何删除列之间的marigin

Answer 1

尝试删除这些div之间的空白区域。 Reference

Answer 2

只需添加CSS规则即可覆盖离子默认样式：

.col{
  padding:0 !important;
}

Updated CodePen

如何删除按钮之间的边距？

2 个答案: