使gmail和Facebook登录按钮内联
我有2个按钮
<fb:login-button size="medium" scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
他们正在html页面上生成这样的相应按钮
我希望它们内联并且位于页面中心。该页面的实时网址为
如果使用自定义按钮，则该功能将无法使用，因此无法使用自己的自定义按钮或图标。有人可以帮我吗？
5 个答案:
答案 0 :(得分：1)
使用display:flex;并
justify-content: center;
.wrap{
display:flex;
justify-content: center;
}
.fb_iframe_widget{ padding-top: 5px;}<div class="wrap">
<fb:login-button size="medium" scope="public_profile,email" onlogin="checkLoginState();" login_text="" class="fb_iframe_widget" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=288951165192480&container_width=0&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&scope=public_profile%2Cemail&sdk=joey&size=medium"><span style="vertical-align: bottom; width: 64px; height: 22px;"><iframe name="ff0439d3632534" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" title="fb:login_button Facebook Social Plugin" src="https://www.facebook.com/v2.8/plugins/login_button.php?app_id=288951165192480&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F3tXFuAe2xUh.js%3Fversion%3D42%23cb%3Df383b64291c2b1%26domain%3Dapptellect.cloudapp.net%26origin%3Dhttp%253A%252F%252Fapptellect.cloudapp.net%252Ff2d1ca372cb0084%26relation%3Dparent.parent&container_width=0&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&scope=public_profile%2Cemail&sdk=joey&size=medium" style="border: none; visibility: visible; width: 64px; height: 22px;" class=""></iframe></span></fb:login-button>
<div class="g-signin2" data-onsuccess="onSignIn" data-gapiscan="true" data-onload="true"><div style="height:36px;width:120px;" class="abcRioButton abcRioButtonLightBlue"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon" style="padding:8px"><div style="width:18px;height:18px;" class="abcRioButtonSvgImageWithFallback abcRioButtonIconImage abcRioButtonIconImage18"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span style="font-size:13px;line-height:34px;" class="abcRioButtonContents"></span></div></div></div>
</div>
答案 1 :(得分：0)
尝试一下，我想您想要这样：-
.btnParent{ text-align:center;}
.btnParent .btnClass{ display:inline;}
.btnParent .btnClass .g-signin2{ display:inline;}<div class="btnParent">
<div class="btnClass"><fb:login-button size="medium" scope="public_profile,email" onlogin="checkLoginState();">btn1
</fb:login-button></div>
<div class="btnClass"><div class="g-signin2" data-onsuccess="onSignIn">btn2</div></div>
</div>
答案 2 :(得分：0)
第一种样式，所以它们两者都将相同大小。然后，我认为将其放入 display: inline 的样式的 div 应该可行。从那里您可以单独设置它们的样式，以便其中一个漂浮在其中或其他漂浮在其中，页面外是极限！
答案 3 :(得分：0)
只需执行以下操作，创建一个容器，然后将两个元素都放入容器中即可：
.btnsarea{display:flex;}
.fb_iframe_widget {
display: inline-block;
position: relative;
margin: auto 3px auto auto;
}
.g-signin2 {
margin: auto auto auto 0;
display:block;
}<div class="btnsarea"><fb:login-button size="medium" scope="public_profile,email" onlogin="checkLoginState();" login_text="
" class=" fb_iframe_widget" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=288951165192480&container_width=0&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&scope=public_profile%2Cemail&sdk=joey&size=medium"><span style="vertical-align: bottom; width: 64px; height: 22px;"><iframe name="f22512bd6207a88" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" title="fb:login_button Facebook Social Plugin" src="https://web.facebook.com/v2.8/plugins/login_button.php?app_id=288951165192480&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F3tXFuAe2xUh.js%3Fversion%3D42%23cb%3Df18fa6e2d2f4cd8%26domain%3Dapptellect.cloudapp.net%26origin%3Dhttp%253A%252F%252Fapptellect.cloudapp.net%252Ff1a232b0e5afa74%26relation%3Dparent.parent&container_width=0&locale=en_US&login_text=%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20&scope=public_profile%2Cemail&sdk=joey&size=medium" style="border: none; visibility: visible; width: 64px; height: 22px;" class=""></iframe></span></fb:login-button><div class="g-signin2" data-onsuccess="onSignIn" data-gapiscan="true" data-onload="true"><div style="height:36px;width:120px;" class="abcRioButton abcRioButtonLightBlue"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon" style="padding:8px"><div style="width:18px;height:18px;" class="abcRioButtonSvgImageWithFallback abcRioButtonIconImage abcRioButtonIconImage18"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span style="font-size:13px;line-height:34px;" class="abcRioButtonContents"><span id="not_signed_inycu4sjx2rmus">Sign in</span><span id="connectedycu4sjx2rmus" style="display:none">Signed in</span></span></div></div></div></div>
不要忘记将这些宽度设置为小于或等于990px
您可以通过复制粘贴来使用它
答案 4 :(得分：0)
.loginBtn {
box-sizing: border-box;
position: relative;
margin: 0.2em;
padding: 0 15px 0 46px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
color: #FFF;
}
.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
.loginBtn--facebook {
background-color: #4C69BA;
background-image: linear-gradient(#4C69BA, #3B55A0);
text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
border-right: #364e92 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
background-color: #5B7BD5;
background-image: linear-gradient(#5B7BD5, #4864B1);
}
.loginBtn--google {
background: #DD4B39;
}
.loginBtn--google:before {
border-right: #BB3F30 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
background: #E74B37;
}<button class="loginBtn loginBtn--facebook">
Login with Facebook
</button>
<button class="loginBtn loginBtn--google">
Login with Google
</button>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？