不動向右

我需要的+按鈕移動到下面的代碼的權利side.But不working.Can你告訴我爲什麼？

.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>

來源

2017-06-19 Sampath

這個什麼：'.plusButton { 的位置是：絕對的; z-index：11; 顏色：白色; top：16px; right：16px; }'？ – sebaferreras

是的，這是working.But你能告訴我你是怎麼決定應該是正確的'：16px'？這不是'ipad'（即更大的設備）的問題嗎？@sebaferreras – Sampath

離子通常在內容中使用「16px」的填充（當您將'padding'屬性添加到內容' ... ...「時，我總是在需要時使用相同的填充所以東西*外面*離子... – sebaferreras

這個怎麼樣的項目高端物業：

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

請注意top和right值。離子通常使用16像素的填充的內容（當您添加padding屬性內容<ion-content padding>...所以，我總是使用相同的填充，當我需要做的事情外離子。

也請注意，如果按鈕是一個navbar裏面，我建議使用<ion-buttons end>...<ion-buttons>容器放置在右邊，但在這種情況下，似乎是按鈕是不是navbar/toolbar的一部分，所以我想我們就可以通過使用CSS修復

來源

2017-06-19 07:09:09 sebaferreras

是的，你對'navbar'用例說得對。不在這裏使用'navbar'.Thanks :) – Sampath

Np，很高興幫助:) – sebaferreras

使用權財產對齊元素分辯。並指派相對到要設置右對齊哪個位置。

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

來源

2017-06-19 06:58:12

你可以嘗試用離子鍵

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

來源

2017-06-19 07:01:20 SAJ

首先，您不能同時使用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庫馬爾乙說，但你必須定義父DIV爲relative。

來源

2017-06-19 07:16:09

嘗試設置值位置相對。

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

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

來源

2017-06-19 13:52:29 Santiago

回答

相關問題