我正在尝试将所有三个跨度都放在锚点内联中。不知道代码中缺少什么:
a.facebook-button {
float: none;
display: inline-block;
margin-bottom: 5px;
left: auto;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
.fb-button-left {
width: 40px;
}
.fb-button-right,
.fb-button-center,
.fb-button-left {
float: left;
height: 40px;
background: url(../img/fb-button.png) left top no-repeat;
}
.fb-button-right {
width: 6px;
background-position: 100% -80px;
}
.fb-button-center {
padding: 0 5px 0 8px;
line-height: 40px;
font-size: 16px;
color: #FFFFFF;
background-color: #6385ba;
background-position: left -40px;
background-repeat: repeat-x;
}
div.socialInvites {
padding: 20px 20px 0px 20px;
text-align: center;
left: auto;
}
<div class="socialInvites">
<a href="main/facebook_request" class="facebook-button" id="facebookbutton">
<span class="fb-button-left"></span>
<span class="fb-button-center"><strong>Connect</strong> with <strong>Facebook</strong></span>
<span class="fb-button-right"></span>
</a>
</div>
最佳答案
请尝试添加以下内容:display:inline;
例:
.fb-button-right {
width: 6px;
background-position: 100% -80px;
display:inline;
}
同样,与
fb-button-center
相同。关于html - 跨行 anchor ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14307588/