css中的Float Right属性不起作用

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 删除位置:固定;

Answer 2

我改变了

left: 7px;

left: 90% 

它修复了这个问题

Answer 3

使用CSS Flexbox。创建一个父容器，其中包含输入&按钮- .input-container，并应用display: flex;属性与align-items: center;(将项目垂直排列在中心)。

并将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>

希望这对你有帮助!