浮動在CSS中的權利屬性不起作用

Question

我想將發送按鈕排列在右側。但它不起作用。

CSS：

input.textarea { 
     position: fixed; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     width: 100%; 
     height: 50px; 
     z-index: 99; 
     background: #fafafa; 
     border: none; 
     outline: none; 
     padding-left: 55px; 
     padding-right: 55px; 
     color: #666; 
     font-weight: 400; 
    } 
    .send-btn { 
     float: right!important; 
     position: fixed; 
     text-align: right; 
     bottom: 8px; 
     left: 7px; 
     width: 34px; 
     height: 34px; 
     background-image: url(https://cdn2.iconfinder.com/data/icons/dark-action-bar-2/96/send-512.png); 
     background-repeat: no-repeat; 
     background-size: cover; 
     z-index: 100; 
     cursor: pointer; 
    } 

所以，請幫我解決這個錯誤..

謝謝... \

。

Answer 1

In .send-btn remove position：fixed;

Answer 2

我改變了

left: 7px; 

到

left: 90% 

，它解決了這一問題

Answer 3

使用CSS Flexbox的。創建一個父容器，其中包含輸入&按鈕 - .input-container並將display: flex;屬性應用於​​（以垂直排列中心的項目）。

並將input.textarea和.send-btn作爲其項目（子項）。

請看看下面的代碼。

/* New container with flex properties */ 
 
.input-container { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    width: 100%; 
 
    height: 50px; 
 
    z-index: 99; 
 
    display: flex; /* Flex Property */ 
 
    align-items: center; /* Alignining items center vertically */ 
 
    background: #fafafa; /* Applying BG to container instead of textfield */ 
 
} 
 

 
/* Modifications to input */ 
 
input.textarea { 
 
    width: 100%; 
 
    height: 50px; 
 
    padding: 0 25px; 
 
    background: transparent; 
 
    
 
    /* Old styles */ 
 
    z-index: 99; border: none; outline: none; color: #666; font-weight: 400; 
 
} 
 

 
.send-btn { 
 
    margin-right: 15px; 
 
    width: 40px; 
 
    height: 34px; 
 
    
 
    /* Old styles */ 
 
    background-image: url(https://cdn2.iconfinder.com/data/icons/dark-action-bar-2/96/send-512.png); background-repeat: no-repeat; background-size: cover; z-index: 100; cursor: pointer; 
 
}

<div class="input-container"> 
 
    <input type="text" class="textarea" value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..." /> 
 
    <button class="send-btn"></button> 
 
</div>

希望這有助於！