我正试图调整我们的3个社交媒体按钮:Facebook / Twitter / Google +,均匀地在393px的宽度差距中。它们是水平对齐的(facebook似乎在twitter / google +上垂直下降了大约2 px),但是我有点挣扎,希望有人可以提供帮助。
以下是CSS / HTML按钮的代码:
HTML
<div class="nav-container2">
<div id="nav3"><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>
<a href="https://twitter.com/FoscamUK" class="twitter-follow-button" data-show-count="false">Follow @FoscamUK</a>
<div class="g-plusone" data-size="medium"></div>
CSS
.nav-container2 { width:940px; margin:auto; height:30px;}
#nav2 { width:547px; height:40px; float:right; margin:1px 0 0 0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }
#nav3 { width:393px; float:left; height:0px; margin-top:10px;}
非常感谢
答案 0 :(得分:6)
试试这个:
<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>
CSS:
.nav-container2 { width:940px; margin:auto; height:30px;}
.social-media-list { width: 393px; }
.social-media-list li { display:block; float: left; width:33.3%; text-align:center; margin: 0 auto;}
这只是一个猜测,因为我不确定这将如何适合您的页面,但这将为您提供一个393px宽的块元素,其中包含3个均匀间隔的列表项。
答案 1 :(得分:0)
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>
CSS
.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;}
根据之前的回答。添加了borders
和background-color
以显示正在发生的事情。