試圖使社交媒體圖標在同一行中彼此並排的頁腳css

Question

它的一個rails應用程序，我主要做很多編程和較少的HTML/CSS樣式。

這裏是我試圖

<div class="footer"> 
    <div class="fbicon"> 
     <%= image_tag 'fb-icon-white.png'%> 
    </div> 
    <div class="twicon"> 
     <%= image_tag 'twitter-icon-white.png'%> 
    </div> 
    <div class="pticon"> 
     <%= image_tag 'pinterest-icon-white.png'%> 
    </div> 
    </div> 

我的想法是，主頁腳將有一個大的寬度，然後該圖標的其餘部分將採取屬於主要的一個部分寬度頁腳。

的應用得到了SCSS文件，這是我嘗試做一個三路部分CSS

.footer { 
    width: 960px; 
    border: 1px; 

    .fbicon { 
     width: 300px; 
    } 

    .twicon { 
     width: 300px; 
    } 

    .pticon { 
     width: 300px; 
    } 
} 

他們都對準一個疊在另一個上。他們不在我正在尋找的同一行。任何幫助表示讚賞。

Answer 1

A div元素默認情況下具有block顯示，其寬度爲100％，因此是它們堆疊在一起的原因。您可以嘗試使用inline-block代替：

.footer { 
    .fbicon, .twicon, .pticon { 
    display: inline-block; 
    } 
} 

或者你可以將它們漂浮到左：

.footer { 
    .fbicon, .twicon, .pticon { 
    float: left; 
    } 
}