浮动在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>

希望这有助于！