圖標調整大小以適應div

我有一個div，可以包含0到7個圖標，具體取決於某些選擇。圖標是ionicons。目前，我的代碼是：圖標調整大小以適應div

<div class="item item-text-wrap" style="text-align:center;"> 
    <button class="button" style="background-color: #3b5998" ng-if="website" ng-click="openSocialLink('website')"><i class="icon ion-ios-world-outline" style="color:white"></i></button> 
    <button class="button" style="background-color: #3b5998" ng-if="social.facebook" ng-click="openSocialLink('fb')"><i class="icon ion-social-facebook" style="color:white"></i></button> 
    <button class="button" style="background-color: #007bb6" ng-if="social.linkedin" ng-click="openSocialLink('linkedin')"><i class="icon ion-social-linkedin" style="color:white"></i></button> 
    <button class="button" style="background-color: #00aced" ng-if="social.twitter" ng-click="openSocialLink('twitter')"><i class="icon ion-social-twitter" style="color:white"></i></button> 
    <button class="button" style="background-color: #bb0000" ng-if="social.youtube" ng-click="openSocialLink('youtube')"><i class="icon ion-social-youtube" style="color:white"></i></button> 
    <button class="button" style="background-color: #eeee00" ng-if="social.snapchat" ng-click="openSocialLink('snapchat')"><i class="icon ion-social-snapchat" style="color:white"></i></button> 
    <button class="button" style="background-color: #c42da5" ng-if="social.instagram" ng-click="openSocialLink('instagram')"><i class="icon ion-social-instagram" style="color:white"></i></button> 
</div>

是否有可能使圖標大小調整爲佔據一行？現在的問題是，如果他們的屏幕尺寸太小，那麼這將佔用多行。

編輯：另外，我已經開始使用ionic grid system，現在的問題只是在較小的屏幕尺寸上沒有項目之間的間距，是否有可能分成兩行，如果它們之間的空間太小？

來源

2016-08-18 user6689604

看起來不錯這裏== https://jsfiddle.net/opd1vf86/ – Tasos

你說得對。也許我們另一個CSS變化就是搞砸了。謝謝！ – user6689604

然後檢查圖標，看看是否有任何來自ionicons的CSS被刪除或任何其他問題 - 右鍵單擊圖標並選擇檢查（chrome瀏覽器） - 檢查元素（firefox）以查看CSS – Tasos

如果你放一張桌子，這個問題很容易解決。

這是代碼。

<table style="text-align: center; margin: auto;"> <!-- to make the buttons in the center--> 
    <tbody> 
     <tr> 
      <td><button class="button" style="background-color: #3b5998" ng-if="website" ng-click="openSocialLink('website')"><i class="icon ion-ios-world-outline" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #3b5998" ng-if="social.facebook" ng-click="openSocialLink('fb')"><i class="icon ion-social-facebook" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #007bb6" ng-if="social.linkedin" ng-click="openSocialLink('linkedin')"><i class="icon ion-social-linkedin" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #00aced" ng-if="social.twitter" ng-click="openSocialLink('twitter')"><i class="icon ion-social-twitter" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #bb0000" ng-if="social.youtube" ng-click="openSocialLink('youtube')"><i class="icon ion-social-youtube" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #eeee00" ng-if="social.snapchat" ng-click="openSocialLink('snapchat')"><i class="icon ion-social-snapchat" style="color:white"></i></button></td> 
      <td><button class="button" style="background-color: #c42da5" ng-if="social.instagram" ng-click="openSocialLink('instagram')"><i class="icon ion-social-instagram" style="color:white"></i></button></td> 
     </tr> 
    </tbody> 
</table>

來源

2016-08-18 02:00:09

圖標調整大小以適應div

回答

相關問題