ionic中input登录框排版的问题
发布于 2年前 作者 r123qq 2103 次浏览 来自 问答

各位好,用ionic中的标签构造了一个登录框, 代码如下: [<ion-content >

    <form name="userForm" ng-submit="signIn(userForm.$valid,user)" novalidate>
        <label class="item  item-input item-button-right" >
        
          <span class="input-label">用户名: </span>
          <input type="number" name="username" class="form-control" ng-model="user.username" placeholder="11位电话号码" ng-minlength="11" ng-maxlength="11" required>

            <button  ng-show='isShowGet==true || regFlag==true' ng-disabled="userForm.username.$invalid" ng-click="getVeriCode(user)">获取验证码</button>

        </label>
        <label class="item  item-input" ng-show='isShowGet==true || regFlag==true'>
          <span class="input-label">验证码:  </span>
          <input type="number" name="vericode" class="form-control" ng-model="user.vericode" placeholder="长度为4位" ng-minlength="4" ng-maxlength="11" >
        </label>
      <label class="item item-input ">
        <span class="input-label">密码: </span>
        <input type="password" name="password" class="form-control" ng-model="user.password" placeholder="长度至少4位" ng-minlength="4" required>
        <div class="item-note">
          <p  ng-show="isShowGet==true || regFlag==true">请输入新的密码</p>
        </div>
      </label>
        <span class="item">
      <button class="button button-full button-positive" type="submit" >登录</button>
       </span>
    </form>

  
  <span ng-show="isLoginFail" class="item " >
    <div >
      <h2>您输入的用户名或密码不对</h2>
    </div>
  </span>
  <span ng-show="loginFlag==true" class="item" >

    <button class="button button-full button-positive" ng-click="forgotSign()">忘记密码</button>
  </span>

</div>

</ion-content>] 想要达到的目标是: 在用户名输入框的右边有一个button按钮“获取验证码”。 在密码输入框的右边有一句提示语“请输入新的密码”。

现在运行时,可以看到右边的内容,但是显示不全,被屏幕遮住了一部分,不知道要怎么才能让它将右边部分完全显示出来? 豌豆荚截图20150429110027.png

2 回复

用chrome调试一下样式嘛,设置pading或者margin就行了吧,这不是什么大问题

设置了margin,可以了,多谢楼主

回到顶部