我想要在right中的登录和注册按钮,以及在Center中的搜索按钮,我搜索了很多,但没有得到任何解决方案。
另外,如何将文本区域对齐到合适的位置。
下面是我的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中,但我是新手,请告诉我如何做到这一点。
发布于 2014-09-16 13:24:27
我认为Css也会以同样的方式工作。
您可以将内容居中,如下所示:
.center{
text-align:center;
}
更新
要以适当的方式调整宽度,请修改DOM,如下所示:
<div class="item-input-inset">
<label class="item-input-wrapper"> Date
<input type="text" placeholder="Text Area" />
</label>
</div>
<div class="item-input-inset">
<label class="item-input-wrapper"> Suburb
<input type="text" placeholder="Text Area" />
</label>
</div>
CSS
label {
display:inline-block;
border:1px solid red;
width:100%;
font-weight:bold;
}
input{
float:right; /* shift to right for alignment*/
width:80% /* set a width, you can use max-width to limit this as well*/
}
最终更新
如果您不打算修改现有的HTML (最初在您的问题中),下面的css将使我成为您最好的朋友!!:)
html, body, .con {
height:100%;
margin:0;
padding:0;
}
.item-input-inset {
display:inline-block;
width:100%;
font-weight:bold;
}
.item-input-inset > h4 {
float:left;
margin-top:0;/* important alignment */
width:15%;
}
.item-input-wrapper {
display:block;
float:right;
width:85%;
}
input {
width:100%;
}
发布于 2015-04-01 03:27:45
您应该将按钮放在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>
使用您的代码进行演示:
发布于 2017-08-15 23:00:42
要在ionic应用程序代码本身中使用居中对齐,可以使用以下代码:
<ion-row center>
<ion-col text-center>
<button ion-button>Search</button>
</ion-col>
</ion-row>
要在ionic应用程序代码本身中使用右对齐,您可以使用以下代码:
<ion-row right>
<ion-col text-right>
<button ion-button>Search</button>
</ion-col>
</ion-row>
https://stackoverflow.com/questions/25861158
复制相似问题