使2個div並排顯示

-3

我想顯示谷歌& facebook標誌按鈕並排在一個網頁中。我使用引導社交來顯示Facebook按鈕和谷歌API顯示谷歌button.By默認我能夠顯示它們一個在另一個之下，但是當我試圖顯示他們一個我沒有得到期望的輸出誤差旁邊..使2個div並排顯示

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>

電流輸出..

來源

2016-01-10 Lucy

這將是真正有用的，如果你能與我們分享一個撥弄.. – Lal

<!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>

來源

2016-01-10 13:09:57

如何把它們之間的空間？在上面的代碼中輸入「」不起作用.. – Lucy

@Lucy give padding –

它的工作......非常感謝您的幫助！ – Lucy

刪除 ，以.google和.facebook你可以給display: inline-block;或者你可以給雙方float: left;

來源

2016-01-10 12:49:40 Nora

使用這個CSS樣式代碼：

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

來源

2016-01-10 13:07:53

使用CSS代碼：

.google, .facebook { 
    float:left; 
}

或者

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

來源

2016-01-10 14:36:32

使2個div並排顯示

回答

相關問題