问题描述

请问如何设置将input和button在同一行显示

   <input  type="captcha" v-on="blur:captchaCheck" class="form-control flat" placeholder="手机验证码" style="width:160px;"> <button v-on="click:onSubmit" class="get-captcha_button">获取手机验证码</button>

这样不好看，如何设置包button放到input后面。请各位老师指点，谢谢。

解决方案

是不是get-captcha_button这个样式设置display为block了？改成下面的试试

 <input type="captcha" v-on="blur:captchaCheck" class="form-control flat" placeholder="手机验证码" style="width:160px;display:inline;"> <button v-on="click:onSubmit" class="get-captcha_button" style="display:inline">获取手机验证码</button>

解决方案二：

 给input框添加 float:left

解决方案三：

是不是密码框太长了。这个要看你的css才能确定。

解决方案四：

http://biancheng.dnbcw.info/net/102011.html

解决方案五：

改为

获取手机验证码

解决方案六：

CSS的问题，你可以在Chrome或者Firefox中F12开启调试模式，看看你那个“获取验证码”的CSS是什么，肯定是超过了上一行的宽度造成了自动换行。

解决方案七：

 <input v-model="user.sms" id="sms" type="sms" v-on="blur:smsCheck" class="form-control flat" placeholder="手机验证码" style="width:160px; display:inline" >

 <input type="button" v-on="click:getSms" id="btnsms" value="获取短信验证码" class="get-sms-button" style="display:inline">

解决方案八：

直接这样写

获取手机验证码
不用再加其他样式
就是在一排了

解决方案九：

直接这样写

获取手机验证码

不用再加其他样式
就是在一排了

解决方案十：

设置input 内容居中显示
设置input?内容居中显示