离子 - 输入框宽度

Question

我的login.html输入框有问题。我无法增加输入框的宽度。如果我将宽度增加到100％，则高度随之增加。

这是显示宽度的图像。

我希望宽度几乎是它的两倍。 这是我的html和css的链接： this

item.item-input {
    border: none;
    position: relative;

    left: 0px;
    top: 135px;
    background-color: transparent;
}

Answer 1

.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%;
}

Answer 2

.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>