CSS如何獲得浮achors旁邊的海誓山盟horizantal

標記如下CSS如何獲得浮achors旁邊的海誓山盟horizantal

 <div class="socialMediaPlugin"> 
    <a class="addthis_button_facebook"></a> 
    <a class="addthis_button_twitter"></a> 
    <a class="addthis_button_google_plusone_share"></a> 
    <a class="addthis_button_pinterest" ></a> 
    <a class="addthis_button_email"></a> 
    </div>

然後我試圖

.socialMediaPlugin { 
float: right;

} 但他們似乎下海誓山盟，而不是下一個？我怎麼能把他們並排？

來源

2012-04-10 StevieB

容器可能不夠寬，無法容納所有容器。 – Francisc 2012-04-10 20:36:32

可以使用

.socialMediaPlugin a{ 
    display: block; 
    position: relative; 
    float: left; 
}

的鏈接將一側到另一側

來源

2012-04-10 20:38:01

和鏈接會更好看，如果你把裏面的東西一樣

Facebook Twitter G+ interest E-mail

，除非你有你的CSS背景，寬度和高度給他們。並在IE7的顯示器：內聯塊不起作用，如果你使用不同高度的鏈接 – 2012-04-10 20:40:57

你需要將它應用到的鏈接，而不是容器，所以你的CSS應該閱讀

.socialMediaPlugin a { 
    float: right; 
}

你可以看到一個例子here

或者你可以使用

.socialMediaPlugin:nth-child(n) { 
    float: right; 
}

.socialMediaPlugin * { 
    float: right; 
}

雖然我不會建議它，它是相當哈克！

此外，你應該使用這樣的事情的有序列表，你可以看到基於請求，從海報

這樣的鏈接的順序here

編輯的例子可以維護，所以有必要將鏈接包裝在display:block的div中，並將其正確地浮動。看到這個活example。

CSS

.socialMediaPlugin div { display: block; float: right; }

來源

2012-04-10 20:38:32 jacktheripper

這似乎工作，但它扭轉了錨的順序，即第一個錨現在顯示最後等無論如何圍繞呢？ – StevieB 2012-04-10 20:44:00

看到這個解決方案http://jsfiddle.net/jackdent/cDwPb/3/ – jacktheripper 2012-04-10 20:45:43

而我的修改答案:) – jacktheripper 2012-04-10 20:47:37

自錨是，他們會自然地疊起旁邊的海誓山盟alreayd聯級別的元素。

問題更可能是您的容器不夠寬，無法容納堆放的物品，因此它們將其包裹起來。

無論是你還是你有一些其他樣式應用到你的錨元素，導致他們像塊級元素一樣。

來源

2012-04-10 20:46:01

CSS如何獲得浮achors旁邊的海誓山盟horizantal

回答

相關問題