[英]Add space between the two icons for all resolutions
我有一個靜態行,帶有兩個圖標ion-email和ion-compose 。
在我的演示中,圖標之間沒有空格。 我需要添加一些,但它必須適用於所有分辨率。
<div class="list">
<a class="item item-icon-right" href="#">
<i class="icon ion-email"></i>
<i class="icon ion-compose"></i>
Check mail
</a>
</div>
我需要在兩個圖標之間添加恆定的空間。
這是我的代碼: http : //codepen.io/anon/pen/aOzOWZ
您需要實現這些更改-Codepen
.item-icon-right i.icon {
display: inline-block;
float: right;
position: relative;
right: auto;
}
這將導致以下CSS,請注意注釋掉的部分:
.item-icon-right .icon {
/* right: 11px; */
display: inline-block;
float: right;
}
.item-icon-left .icon, .item-icon-right .icon {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
/* position: absolute; */
/* top: 0; */
height: 100%;
font-size: 32px;
}
一個非常簡單的解決方案是靜態放置第一個圖標。
只需將此類添加到CSS。
.item-icon-right i:nth-child(1) {
right: 50px;
}
對於更強大的解決方案,我建議為一個單獨的組件創建樣式,該樣式可以浮動到右側並包含嵌入式圖標。
.icon-holder-right {
float: right;
}
例如: http : //codepen.io/anon/pen/MwYwqw
這種方法的好處是您不會覆蓋任何現有規則,這意味着它不太可能破壞應用程序的任何其他部分。
嘗試這個
.icon{ position:inherit !important; display:inline-block !important; float:right; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.