图标调整大小以适应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，现在的问题只是在较小的屏幕尺寸上没有项目之间的间距，是否有可能分成两行，如果它们之间的空间太小？

看起来不错这里== 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>

图标调整大小以适应div

相关推荐