Html 调整社交媒体按钮
我正试图将我们的3个社交媒体按钮:Facebook/Twitter/Google+均匀地排列在一个393倍宽的间隙中。它们是水平排列的(facebook在twitter/google+上的垂直位置似乎下降了2像素左右,但我有点挣扎,希望有人能帮上忙 以下是CSS/HTML按钮的代码: HTML 非常感谢试试这个:Html 调整社交媒体按钮,html,css,social-networking,facebook-social-plugins,Html,Css,Social Networking,Facebook Social Plugins,我正试图将我们的3个社交媒体按钮:Facebook/Twitter/Google+均匀地排列在一个393倍宽的间隙中。它们是水平排列的(facebook在twitter/google+上的垂直位置似乎下降了2像素左右,但我有点挣扎,希望有人能帮上忙 以下是CSS/HTML按钮的代码: HTML 非常感谢试试这个: <div class="nav-container2"> <ul class="social-media-list"> <li&g
<div class="nav-container2">
<ul class="social-media-list">
<li>
<div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false"></div>
</li>
<li>
<a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a>
</li>
<li>
<div class="g-plusone" data-size="medium"></div>
</li>
</ul>
</div>
这只是一个猜测,因为我不确定这是否适合您的页面,但这将为您提供一个393px宽的块元素,其中包含3个等距的列表项。尝试以下方法:
<div class="nav-container2">
<ul class="social-media-list">
<li>
<div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false"></div>
</li>
<li>
<a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a>
</li>
<li>
<div class="g-plusone" data-size="medium"></div>
</li>
</ul>
</div>
这只是一个猜测,因为我不确定这是否适合您的页面,但这将为您提供一个393px宽的块元素,其中包含3个等距的列表项。html
<div class="nav-container2">
<ul>
<li>
<div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false">x</div>
</li>
<li>
<a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a>
</li>
<li>
<div class="g-plusone" data-size="medium">y</div>
</li>
</ul>
</div>
根据前面的答案<代码>边框和背景色被添加以显示发生了什么。html
<div class="nav-container2">
<ul>
<li>
<div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false">x</div>
</li>
<li>
<a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a>
</li>
<li>
<div class="g-plusone" data-size="medium">y</div>
</li>
</ul>
</div>
根据前面的答案<添加了代码>边框和背景色,以显示发生的情况。非常感谢!工作得很好!非常感谢!工作得很好!
<div class="nav-container2">
<ul>
<li>
<div class="fb-like" data-href="http://www.facebook.com/pages/Foscam-UK/222224154548563" data-send="false" data-layout="button_count" data-width="20" data-show-faces="false">x</div>
</li>
<li>
<a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a>
</li>
<li>
<div class="g-plusone" data-size="medium">y</div>
</li>
</ul>
</div>
.nav-container2 { width:940px; margin:auto; height:30px; background-color: #ace}
.nav-container2 ul div {display: inline;}
.nav-container2 li {display: inline; border: 1px solid #000; width: 33%; float: left;}