首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >离子输入框宽度

离子输入框宽度
EN

Stack Overflow用户
提问于 2016-09-27 17:16:42
回答 2查看 17.5K关注 0票数 2

我的login.html中的输入框有问题。我无法增加输入框的宽度。如果我将宽度增加到100%,高度也会随之增加。

这是一张显示宽度的图像。

我希望宽度几乎是它的两倍。这是我的网页和css的链接:https://jsfiddle.net/ybkjv8uw/

代码语言:javascript
运行
复制
item.item-input {
    border: none;
    position: relative;

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

Stack Overflow用户

回答已采纳

发布于 2016-09-27 17:25:00

代码语言:javascript
运行
复制
.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;
}
代码语言:javascript
运行
复制
<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>

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39720753

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档