离子图标的右对齐

Question

我想在右侧对齐离子图标，它们出现在左侧。我怎样才能做到这一点？有人能帮助我吗？

<div class="bar bar-footer no-line ">
    <i class="icon ion-ios-navigate-outline icon"></i>
    <i class="icon ion-document-text icon "></i>
</div>

Answer 1

这是因为.bar根据display:flex具有ionic.css属性 所以justify-content: flex-end;应该适合你。

请注意我添加到bar-footer的 flex-right 类。

请参阅以下代码段：

＆＃13;

＆＃13;

.flex-right {
  justify-content: flex-end;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.3.2/css/ionic.min.css" rel="stylesheet" />
<div class="bar bar-footer no-line flex-right">
  <i class="icon ion-ios-navigate-outline icon"></i>
  <i class="icon ion-document-text icon"></i>
</div>

＆＃13;

＆＃13;

＆＃13;