일부 선택에 따라 0에서 7 사이의 아이콘을 포함 할 수있는 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>
아이콘의 크기가 정확히 한 줄을 차지하도록 만들 수 있습니까? 현재 문제는 화면 크기가 너무 작 으면 여러 줄을 차지한다는 것입니다.
편집 : 또한, 나는 이온 그리드 시스템을 사용하기 시작했습니다 . 이제 문제는 작은 화면 크기에서 항목 사이에 간격이 없다는 것입니다. 두 줄 사이의 공간이 너무 작 으면 두 줄로 나눌 수 있습니까?
이 문제는 테이블을 놓으면 쉽게 해결할 수 있습니다.
이것이 코드입니다.
<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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다