Question

我正在尝试显示谷歌和facebook在网页中并排按钮。我使用bootstrap social来显示Facebook按钮和Google API以显示Google按钮。默认情况下，我可以将它们一个显示在另一个之下，但是当我尝试在错误旁边显示一个，我没有得到所需的输出..

HTML代码..

       <!DOCTYPE html>
       <html lang="en">
       <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta name="google-signin-scope" content="profile email">
       <meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
        <script src="https://apis.google.com/js/platform.js"></script> 

        <!-- Bootstrap -->
       <link href="css/bootstrap.min.css" rel="stylesheet">
       <link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
       <link href="css/bootstrap-social.css" rel="stylesheet">
       <link href="css/font-awesome.css" rel="stylesheet">

       <title>Login Page</title>
       </head>
       <body>
       <div class ="google">
        <div class="g-signin2" data-onsuccess="onSignIn"></div>         <!--Google signup button-->
       </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <!--FB signu&nbsp;p button-->
        <div class="facebook" style="float: left;">
        <a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
        <span class="fa fa-facebook"></span> Connect with Facebook
        </a>
        </div>
        </body>
        </html>

当前输出..

Answer 1

 <!DOCTYPE html>
       <html lang="en">
       <head>
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta name="google-signin-scope" content="profile email">
       <meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
        <script src="https://apis.google.com/js/platform.js"></script> 

        <!-- Bootstrap -->
       <link href="css/bootstrap.min.css" rel="stylesheet">
       <link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
       <link href="css/bootstrap-social.css" rel="stylesheet">
       <link href="css/font-awesome.css" rel="stylesheet">

       <title>Login Page</title>
       </head>
       <body><div class ="google">
        <div style="float:left;" class="g-signin2" data-onsuccess="onSignIn">goooogle</div>         
       </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <!--FB signu&nbsp;p button-->
        <div class="facebook" style="float: left;">
        <a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
        <span class="fa fa-facebook"></span> Connect with Facebook
        </a>
        </div></body>

Answer 2

删除 ，.google和.facebook您可以display: inline-block;，或者您可以同时float: left;

Answer 3

使用此CSS样式代码：

.google{
float:left;
}
.facebook{
float:left;
}

Answer 4

使用css代码：

.google, .facebook {
   float:left; 
}

或者

.google, . facebook{
    display:inline-block;
}

使2个div并排显示

4 个答案: