没有向右移动

Question

我需要将+按钮移到右侧。但是下面的代码无效。你能告诉我为什么吗？

.scss

 .plusButton {
        position: absolute;
        z-index: 11;
        color: white;
        float: right;
    }

html的

<button ion-button clear class="plusButton"> <ion-icon name="add-circle"></ion-icon></button>

Answer 1

这个怎么样：

.plusButton { 
  position: absolute; 
  z-index: 11; 
  color:white; 
  top: 16px; 
  right: 16px; 
}

请注意top和right值。 Ionic通常在内容中使用16px的填充（当您将padding属性添加到内容<ion-content padding>...时，因此，当我需要执行外部离子。

另请注意，如果按钮位于navbar内，我建议使用<ion-buttons end>...<ion-buttons>容器将其放在右侧，但在这种情况下，按钮似乎是不属于navbar / toolbar，所以我想我们可以通过使用css来修复它。

Answer 2

使用右侧属性将元素与rigth对齐。并指定要设置右对齐的位置 relative 。

.plusButton {
    position: absolute;
    z-index: 11;
    color: white;
    right: 0px;
}

Answer 3

您可以尝试使用ion-button

的item-end属性

<button ion-button item-end>...</button>

Answer 4

首先，您不能同时使用absolute和float，float将无效，因为absolute就在那里。 您有很多选项可以让它发挥作用，我更喜欢的方法是使用margin和absolute。请确保按钮是在DOM中的箭头后面写的，然后您可以使用margin-left和margin-top来调整此按钮的位置。

.plusButton {
    position: absolute;
    z-index: 11;
    color: white;
    margin-left: 25px;
    margin-botton: 10px;
}

当然，您可以使用right:0作为@Vijay Kumar B说，但您必须将父DIV定义为relative。

Answer 5

Try to set the value position to relative.

.plusButton {
    position: relative;
    z-index: 11;
    color: white;
    float: right;
}

https://fiddle.jshell.net/5wzptbpj/