Jquery - 调整Input标签的宽度并应用grid将input和button并排一行

来源：互联网发布：车辆保险的算法编辑：程序博客网时间：2024/05/22 13:44

截图如下

css 代码自定义的css

自动获取并重写input的宽度 -input外面的div定义一个id 然后重写

 .ui-input-text

#gotobuy [data-role="content"]{padding :3px ; }#gotobuy [class="ui-block-a"] {text-align : left;width:40px;margin : 15.4px auto;}#cellphone .ui-input-text{width: 100% !important;}#verifycode .ui-input-text{width : 100% !important;}#verifycode {padding-left : 5px;}#verify-btn{text-align: left;padding: 7.5px;}

Jquerymobile html 代码

<div class="ui-grid-c">                    <div class="ui-block-a" style="width:14%">                        <span>手机:<span>                    </div>                    <div class="ui-block-b" id="cellphone" style="width:34%">                       <input type="text" name="cellphone" id="cellphone" placeholder="输入手机号码"/>                    </div>                    <div class="ui-block-c" id="verifycode" style="width:22%">                      <input type="text" name="verifycode" id="verifycode" value="" placeholder="验证码"/>                    </div>                    <div class="ui-block-d" style="width:30%">                        <a href="#" id="verify-btn" data-role="button" data-inline="true">获取验证码</a>                    </div>                </div>      </div>

0 0