离子对齐

Question

我似乎总是在使用CSS时遇到对齐问题。

有很多不同的对齐方式，但是我通常不使用这些技术。

我也不想使用带有％值的边距。

试图使该对勾正确对齐。

。HTML

    <ion-item>
      <span>
        Every Sunday
      </span>
      <ion-icon class="right" name="checkmark"></ion-icon>
    </ion-item>

。CSS

.right{
   float:right;
   text-align: right;
}

编辑：发现这是防止其他CSS对齐的离子功能。

所以slot="end"在.HTML中完成了技巧

Answer 1

我希望我正确理解了您的问题/意图。尝试为您的ion-item类添加以下规则：

    width: 100%; /* or whatever you want the reference element to be */
    display: inline-block;

这将使您在右边对齐的元素（right）相同-但参考元素（ion-item）的宽度已更改。

Answer 2

您无需为此编写CSS。离子框架已经有了解决方案。Ionic中存在具有开始和结束值的slot属性。

您需要在ion-icon上放置slot =“ end”。

<ion-item>
    <span>
      Every Sunday
    </span>
    <ion-icon slot="end" class="right" name="checkmark"></ion-icon>
  </ion-item>

希望它会有所帮助。