input + button input框中内嵌button按钮
input和button添加display: inline-block属性, 同时用一个div包裹, div设置border, input的border和outline都去掉, 这时即可实现
+ <div class="sign_up_send_validation_code">
+ <p>
+ 电话: <%= f.text_field :mobile, autofocus: true, placeholder: '请输入手机号码', style: 'width: 80%;' %>
+ <%= link_to '获取验证码', 'javascript:void(0)', id:'send_validation_code', class: "app-btn primary", style: "margin-left: -92px; position: absolute;display: inline-block; text-align: center; width: 120px; height: 55px; border-radius: 12px; padding: 15px 16px; box-sizing: border-box; font-size: 14px; outline: none; display: inline-block; " %>
+ </p>
+ </div>
增加css到对应的文件
+.sign_up_send_validation_code {^M
+ height: 55px;^M
+ background: #fff;^M
+ /*! border: 1px solid rgba(195, 195, 208, 1); */^M
+ border-radius: 12px;^M
+ /*! padding: 15px 16px; */^M
+ box-sizing: border-box;^M
+ color:var(--text-color-main);^M
+ outline: none;^M
+ width: 100%;^M
