Question

我有一个div，可以包含0到7个图标，具体取决于某些选择。图标为ionicons。目前，我的代码是：

git commit

是否有可能使图标调整大小以准确占据一行？现在的问题是，如果他们的屏幕尺寸太小，那么这会占用多行。

编辑：另外，我已经开始使用ionic grid system，现在问题只是在较小的屏幕尺寸上，项目之间没有间距，如果它们之间的空间将会分成两行太小了？

Answer 1

如果你摆桌子，这个问题很容易解决。

这是代码。

<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

1 个答案: