我的login.html输入框有问题。我无法增加输入框的宽度。如果我将宽度增加到100%,则高度随之增加。
这是显示宽度的图像。
我希望宽度几乎是它的两倍。 这是我的html和css的链接: this
item.item-input {
border: none;
position: relative;
left: 0px;
top: 135px;
background-color: transparent;
}
答案 0 :(得分:2)
.item.item-input {
border: none;
position: relative;
top: 135px;
background-color: transparent;
width:100%;
}
.item.item-input>span{
width:auto;
}
.item.item-input>input{
width:68%;
}
答案 1 :(得分:0)
.view-content {
background-color:#85b818;
}
.img-div {
position: relative;
left: 110px;
top: 35px;
}
.item.item-input {
border: none;
position: relative;
left: 0px;
top: 135px;
background-color: transparent;
width:100%;
}
.item.item-input span{width:auto;}
.item.item-input input{width:68%;}
/*.item-input-inset .item-input-wrapper input {
padding-left: 4px;
height: 29px;
background: transparent;
line-height: 18px;
// you should add the following:
box-sizing: border-box;
width: 100%;
}*/
input::-webkit-input-placeholder {
color: white;
}
label {
/*display: block; width: 100%;*/
width:200px;
float: left;
/*clear:left;*/
text-align:right;
/*padding-right:10px;*/
}
input{
/*float:left;*/
}
.enter-div {
text-align: center;
}
.enter-button {
position: relative;
top: 170px;
width: 280px;
height: 50px;
border-radius: 25px;
border: none;
background-color: green;
color: white;
}
.foyopass-div {
position: relative;
text-align: center;
top: 200px;
color: white;
}
<ion-view class="view-content">
<div class="img-div">
<img src="img/main_logo_icon.png" style="width : 40% ; height : 20%" >
</div>
<div>
<label class="item item-input">
<span class="input-label" ><img src="img/email_icon.png" style="width: 30%" ></span>
<input type="email" placeholder="Email">
</label>
</div>
<div>
<label class="item item-input">
<span class="input-label" ><img src="img/password_icon.png" style="width: 25%"></span>
<input type="password" placeholder="Password">
</label>
</div>
<div class="enter-div">
<button class="enter-button">
Enter
</button>
</div>
<div class="enter-div">
<a href="" class="foyopass-div">forgot your password?</a>
</div>
</ion-view>