我想要右边的登录和注册按钮,中心的搜索按钮,我搜索了很多但没有找到任何解决方案。
还有如何将文本区域对齐到合适的位置。
这是我的 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-left、text-center和 text-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/