google captcha Div标签在移动设备和桌面设备上显示错位

时间：2016-06-16 17:56:57

标签： html css mobile

我在移动和桌面上查看以下页面时遇到问题。验证码部分

`<div class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div>`
在移动设备和桌面设备上看到

未正确对齐。

任何人都可以帮助我如何在桌面和移动设备上正确对齐。

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Hello</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>

    <body style="background: #f2f2f2;">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div style="position: relative; width:95%; max-width: 820px; height: 467px; background: #ffffff; font-family:Arial, Helvetica, sans-serif; margin:0px auto;">
      <div style=" position:absolute; left:0px; top:50px; width:100%; text-align:center;">  </div>
      <div style="position:absolute; left:0px; top:160px; width:100%; font-size:24px; text-align:center; font-weight:bold;"> Hello </div>
      <div style="position:absolute; left:0px; top:180px; width:100%; font-size:16px; text-align:center;"> <br>
        Get the smartest tips, news and tools on parenting in one timesaving newsletter, plus more.<br>
        <a href="http://google.com/" style="color:#e2232e; font-size:14px; text-decoration:none; white-space:nowrap;" target="_blank">See Sample</a><br>
        <br>
        <br>
      </div>
      <form   method="post" style="position:absolute; left:0px; top:290px; width:100%; font-size:18px; text-align:center;" onsubmit="return validateCapcha();">

        <input value="" class="newsletter-email-text" style="vertical-align:middle; width:55%; max-width:250px; height:30px; padding:2px 3px; border:1px solid #dddddd; font-size:18px; background:#ffffff;" name="email" type="text" pattern="[A-Za-z0-9._+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" placeholder="Email" title="Valid email address required" required>
        <input value="SUBMIT" class="newsletter-email-submit-button" style="vertical-align:middle; width:95px; height:36px; line-height:36px; text-align:center; background:#ed1c24; color:#ffffff; border:0px; border-radius:3px; font-weight:bold; font-size:14px; cursor:pointer;" type="submit">

        <div style="position: relative; width:95%; max-width: 820px; height: 467px;  font-family:Arial, Helvetica, sans-serif; margin:0px auto;">
        <div class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div>
        </div>
        <p id="customeMessage" style="display:none;position:absolute;bottom:10px;vertical-align:middle;text-align:center;top:112px;left:229px;"><lable> Please check the capcha </lable></p>


      </form>

    </div>

    </body>
    </html>

此致

我想要 - enter image description here

现在它就像下面一样 -

enter image description here

1 个答案:

答案 0 :(得分：0)

这是您的解决方案（在该div中添加样式）

更新2 

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Hello</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>

    <body style="background: #f2f2f2;">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div style="position: relative; width:95%; max-width: 820px; height: 467px; background: #ffffff; font-family:Arial, Helvetica, sans-serif; margin:0px auto;">
      <div style=" position:absolute; left:0px; top:50px; width:100%; text-align:center;">  </div>
      <div style="position:absolute; left:0px; top:160px; width:100%; font-size:24px; text-align:center; font-weight:bold;"> Hello </div>
      <div style="position:absolute; left:0px; top:180px; width:100%; font-size:16px; text-align:center;"> <br>
        Get the smartest tips, news and tools on parenting in one timesaving newsletter, plus more.<br>
        <a href="http://google.com/" style="color:#e2232e; font-size:14px; text-decoration:none; white-space:nowrap;" target="_blank">See Sample</a><br>
        <br>
        <br>
      </div>

<table style="position:absolute; left:-25.5%; width:100%; font-size:18px; text-align:center;top:290px; vertial-align:top; ">
<tr> 

<td style=" vertical-align:top;">
      <form   method="post" style=" left:0px; width:150%; font-size:18px; " onsubmit="return validateCapcha();">

        <input value="" class="newsletter-email-text" style="vertical-align:middle; width:55%; max-width:300px; height:30px; padding:2px 3px; border:1px solid #dddddd; font-size:18px; background:#ffffff;" name="email" type="text" pattern="[A-Za-z0-9._+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" placeholder="Email" title="Valid email address required" required><input value="SUBMIT" class="newsletter-email-submit-button" style="vertical-align:middle; width:95px; height:36px; line-height:36px; text-align:center;  background:#ed1c24; color:#ffffff; border:0px; border-radius:3px; font-weight:bold; font-size:14px; cursor:pointer;" type="submit">
 <div style="position: relative; width:95%; max-width: 820px; height: 467px;  font-family:Arial, Helvetica, sans-serif; margin:0px auto;"> 

 <div style="  justify-content: center; margin-top:15px; margin-left:210px"  class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div>  

</div>
        <p id="customeMessage" style="display:none;position:absolute;bottom:10px;vertical-align:middle;text-align:center;top:112px;left:229px;"><lable> Please check the capcha </lable></p>
</td>

<td style=" vertical-align:top;">




</td></tr>
</table>

      </form>

    </div>

    </body>
    </html>
相关问题
最新问题