我的login.html中的输入框有问题。我无法增加输入框的宽度。如果我将宽度增加到100%,高度也会随之增加。
这是一张显示宽度的图像。

我希望宽度几乎是它的两倍。这是我的网页和css的链接:https://jsfiddle.net/ybkjv8uw/
item.item-input {
border: none;
position: relative;
left: 0px;
top: 135px;
background-color: transparent;
}发布于 2016-09-27 17:25:00
.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>
https://stackoverflow.com/questions/39720753
复制相似问题