我对CSS没什么疑问和不清楚。 我不知道为什么第一个社交fb btn不像社交推特和社交网站那样。
这是我的HTML代码
<div class="cus-social">
<button id="social-fb" class="btn btn-success" type="button"><a href="https://www.facebook.com/sharer/sharer.php?u=http://myhero.asia/"><i class="icon-facebook"></i></a></button>
<button id="social-twitter" class="btn btn-success" type="button"><a href="https://twitter.com/share?text=MYHERO%20is%20so%20powerful"><i class="icon-twitter"></i></a></button>
<button id="social-g" class="btn btn-success" type="button"><a href="https://plus.google.com/share?url=http://myhero.asia/"><i class="icon-google-plus"></i></a></button>
</div>
这是我的CSS样式表
.cus-social {
position: fixed;
top: 40%;
left: 0;
width: 50px;
margin-right: 20%;
margin-top: 5px;
z-index: 9999;
}
.cus-social .btn {
font-size: 20px;
position: relative;
float: left;
}
.cus-social > .btn:hover {
width: 95px;
}
#social-fb {
background-color: #1B668C;
border-color: #1B668C;
width: 55px;
}
#social-twitter {
background-color: #86BEE0;
border-color: #86BEE0;
}
#social-g {
background-color: #CC322A;
border-color: #BA241F;
}
.btn-success i {
padding-left: 10px;
}
Twitter和Google Plus能够按照预期工作,但Facebook是唯一一个在这里表现得很奇怪的人。有人请告诉我,我不小心弄错了样式表。谢谢。
我将宽度设置为55px,因为如果55px似乎是
答案 0 :(得分:1)
只需删除
width: 55px;
来自
#social-fb {
background-color: #1B668C;
border-color: #1B668C;
width: 55px; /* This line of style is causing the issue. */
}
的 DEMO 强>
你的CSS应该是这样的:
.cus-social {
position: fixed;
top: 40%;
left: 0;
width: 50px;
margin-right: 20%;
margin-top: 5px;
z-index: 9999;
}
.cus-social .btn {
font-size: 20px;
position: relative;
float: left;
}
.cus-social > .btn:hover {
width: 95px;
}
#social-fb {
background-color: #1B668C;
border-color: #1B668C;
}
#social-twitter {
background-color: #86BEE0;
border-color: #86BEE0;
}
#social-g {
background-color: #CC322A;
border-color: #BA241F;
}
.btn-success i {
padding-left: 10px;
}
答案 1 :(得分:0)
查看您的代码,CSS没有任何问题。 您应该检查您的HTML是否有效。例如:图像可能无法正确加载。