css - 如何使用 IONIC 框架在中心或右侧对齐按钮?

标签 css ionic-framework

enter image description here

我想要右边的登录和注册按钮,中心的搜索按钮,我搜索了很多但没有找到任何解决方案。

还有如何将文本区域对齐到合适的位置。

这是我的 html 代码:

<body ng-app="starter">

    <ion-pane  style = "background-color:#4992E2;">
      <ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
        <h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
      </ion-header-bar>
      <ion-content >
          <div class = "row center">
               <div class="col">
                    <button class="button button-small  button-light" >
                      Login!
                    </button>
                     <button class="button button-small  button-light">
                      Register Here!
                    </button>
                </div>
          </div>
          <div class="item-input-inset">
            <h4>Date</h4> 

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Suburb</h4>

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Clinic</h4>
          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <button class=" center button button-small  button-light">
          Search
        </button>

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

我在 bootstrap 中知道,但我是 ionic 的新手,请告诉我该怎么做。

最佳答案

您应该将按钮放在一个 div 中,并且在 div 中您应该能够使用类:
text-lefttext-centertext-right

例如:

<div class="row">
   <div class="col text-center">
      <button class="button button-small button-light">Search</button>
   </div>
</div>

关于“textarea”的位置:

<div class="list">
<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" placeholder="Text Area">
</label>

使用您的代码进行演示:
http://codepen.io/douglask/pen/zxXvYY

关于css - 如何使用 IONIC 框架在中心或右侧对齐按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25861158/

相关文章:

html - 用 border-radius 隐藏的溢出仍然显示小边框

html - w3layout 模板中的希伯来语

html - 如何在 CSS 中添加高度百分比的顶部/底部边距

angular - ionic 图标不显示

javascript - 使用 Google Maps Api 和外部 Json 文件

ios - XCode:无法使用通用设备创建配置文件

css - Wordpress - 图像容器太大

html - 如何使用我从 css 文件导入的字体

javascript - 如何将此 jquery 代码转换为 noconflict

cordova - ionic / Cordova 的Firebase离线功能