离子 - 输入框宽度

Question

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

这是显示宽度的图像。

我想要的宽度是近一倍吧。 这里是一个链接到我的HTML和CSS： https://jsfiddle.net/ybkjv8uw/

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

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

Answer 1

.view-content { 
 
    background-color:#85b818; 
 
} 
 
.img-div { 
 

 
    position: relative; 
 
    left: 110px; 
 
    top: 35px; 
 
    
 

 
} 
 

 
.item.item-input { 
 
\t border: none; 
 
\t 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 { 
 
\t text-align: center; 
 
} 
 

 
.enter-button { 
 
\t position: relative; 
 
    top: 170px; 
 
\t width: 280px; 
 
\t height: 50px; 
 
    border-radius: 25px; 
 
\t border: none; 
 
\t background-color: green; 
 
\t color: white; 
 
} 
 

 
.foyopass-div { 
 
\t position: relative; 
 
\t text-align: center; 
 
\t top: 200px; 
 
\t 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>

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